I create the table header (1 row) in a similar way which only required one loop. Here, I have two loops that're nested.

import { Component } from 'react';
import ReactDOM from 'react-dom';

class InventoryView extends Component {
  getTableBodyAsReactElement() {
    let inv = [{'upc': 123}, {'upc': 454}];
    console.log('inv: ', inv);

    return (!inv) ? null : (
      <tbody>
        {inv.forEach((item) => {
          console.log('item: ', item);
          return(
            <tr>
              {Object.entries(item).forEach((field) => {
                console.log('field: ', field);
                return <td>{field[1]}</td>
              })}
            </tr>
          );
        })}
      </tbody>
    );
  }

  render() {
    return(
      <table>
        {this.getTableBodyAsReactElement()}
      </table>
    )
  }
}

ReactDOM.render(
  <InventoryView />,
  mountNode
);

It looks like all the expected data is there when I print it. The expected behavior is for 123 and 454 to be displayed in the browser in the same column.

I create the table header (1 row) in a similar way which only required one loop. Here, I have two loops that're nested.

import { Component } from 'react';
import ReactDOM from 'react-dom';

class InventoryView extends Component {
  getTableBodyAsReactElement() {
    let inv = [{'upc': 123}, {'upc': 454}];
    console.log('inv: ', inv);

    return (!inv) ? null : (
      <tbody>
        {inv.forEach((item) => {
          console.log('item: ', item);
          return(
            <tr>
              {Object.entries(item).forEach((field) => {
                console.log('field: ', field);
                return <td>{field[1]}</td>
              })}
            </tr>
          );
        })}
      </tbody>
    );
  }

  render() {
    return(
      <table>
        {this.getTableBodyAsReactElement()}
      </table>
    )
  }
}

ReactDOM.render(
  <InventoryView />,
  mountNode
);

It looks like all the expected data is there when I print it. The expected behavior is for 123 and 454 to be displayed in the browser in the same column.

• javascript
• reactjs

Share Improve this question Follow asked Mar 26, 2018 at 0:03 James T.James T. 98811 gold badge1313 silver badges2929 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

.forEach() does not return any value (it returns undefined). Those returns have no effect.

If you want to get an object and return a list of <td>s based on its properties, use .map().

In other words, convert the object into the <td>s using .map() instead of .forEach():

class InventoryView extends Component {
  getTableBodyAsReactElement() {
    let inv = [{ 'upc': 123 }, { 'upc': 454 }];
    console.log('inv: ', inv);

    return (!inv) ? null : (
      <tbody>
        {inv.map((item) => {                                // changed here
          console.log('item: ', item);
          return (
            <tr>
              {Object.entries(item).map((field) => {        // changed here
                console.log('field: ', field);
                return <td>{field[1]}</td>
              })}
            </tr>
          );
        })}
      </tbody>
    );
  }

  render() {
    return (
      <table border="1">
        {this.getTableBodyAsReactElement()}
      </table>
    )
  }
}

map (as opposed to forEach) will return the items as an array, which can then be rendered.

Likewise, Object.entries() returns a key/val pair of the object as an array. However, it seems all you need is Object.values(), so unless necessary you could simplify your code:

class InventoryView extends React.Component {
  getTableBodyAsReactElement() {
    let inv = [{'upc': 123}, {'upc': 454}];
    
    return (!inv) ? null : ( 
      <tbody> 
      {
        inv.map(item => {          
          return (
            <tr> 
            {
              Object.values(item).map(value => {
                return (<td>{value}</td>)
              })
            } 
            </tr>
          );
        })
      }
      </tbody>
    );
  }
  render() {
    return (<table>{this.getTableBodyAsReactElement()}</table>)
  }
}
ReactDOM.render(<InventoryView />, document.body );

table{ border:1px solid; }

<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>