Rendering an Object to a table using React.js syntax

Question

I can't get the following to work in React's render()

<table>
  <tbody>
    ...
    { this.state.data.map( (entry, index) => 
      <tr>{ Object.values(entry).forEach( e => <td>{e}</td> )}</tr> 
    )}
  </tbody>
</table>

However, when I replace <td>{e}</td> with console.log(e) I see what I expect to render. In fact, no regular html element would render inside the forEach method either. What is the common way of doing this in React?

larz · Accepted Answer · 2019-03-08 21:04:45Z

5

.forEach doesn't return anything, but .map does. If you change

Object.values(entry).forEach( e => <td>{e}</td>

to

Object.values(entry).map( e => <td>{e}</td>

that should work.

answered Mar 8, 2019 at 21:04

larz

5,7662 gold badges13 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Rendering an Object to a table using React.js syntax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related