Dynamically creating table rows in React

Question

My requirement is to dynamically create table rows via iteration on an array object. I am using the below piece of code to achieve it:

details = _.forEach(executionDetails, function(value) {
        return (
          <TableRow>
            <TableCell> { value.numResults } </TableCell>
            <TableCell> { value.timeStamp } </TableCell>
          </TableRow>
        )
      })
  <Table>
   <TableBody>
       {details}
   </TableBody>
  </Table>

But this does not work and i am getting the error: Objects are not valid as a React child . If you meant to render a collection of children, use an array instead. Thanks in advance

Shubham Khatri · Accepted Answer · 2018-06-13 06:12:35Z

2

forEach doesn't return anything, you need to use map to be able to return the result

details = executionDetails.map(function(value) {
    return (
      <TableRow>
        <TableCell> { value.numResults } </TableCell>
        <TableCell> { value.timeStamp } </TableCell>
      </TableRow>
    )
  })

<Table>
   <TableBody>
       {details}
   </TableBody>
</Table>

answered Jun 13, 2018 at 6:12

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

Collectives™ on Stack Overflow

Dynamically creating table rows in React

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