CODEWITHSUNDEEP
reactjs
vartika
vartika

Reputation: 23

Dynamically creating table rows in React

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

Upvotes: 1

Views: 97

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281656

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>

Upvotes: 2

Related Questions