json data to render in <TableRow> in react

Question

I am trying to render a tableData of a format like:

in a <TableRow> like :

{this.state.tableData.map((row, index) => (
          <TableRow key={index}>
            <TableRowColumn>{console.log(tableData[index].name)}{tableData[index].name}</TableRowColumn>
            <TableRowColumn>{tableData[index].role}</TableRowColumn>
            <TableRowColumn>{tableData[index].phone}</TableRowColumn>
            <TableRowColumn>{tableData[index].email}</TableRowColumn>
          </TableRow>
          ))}

the console in the code snippet is giving me the correct value I can check in the browser.

But the code snippet <TableRowColumn>{tableData[index].name}</TableRowColumn> is giving the error Error : TypeError: Cannot read property 'name' of undefined

any suggestion please!!

Anton Melnikov · Accepted Answer · 2016-11-30 07:36:53Z

2

Because, you should call table data with this.state.tableData in rows too, not with tableData[index], because tableData is undefined. But I would recommend you to use row variable which you have inside the map function.

answered Nov 30, 2016 at 7:36

Anton Melnikov

1,0687 silver badges22 bronze badges

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

4 Comments

NDeveloper Over a year ago

using row, how can I render the value in that case, as I am receiving data in a Array of json format. [{"userId":"User8","password":null,"name":"User8","role":"role8","phone":"9874020208","email":"[email protected]","msg":null,"statusCode":201},{"userId":"User0","password":null,"name":"User0","role":"role0","phone":"9874020200","email":"[email protected]","msg":null,"statusCode":201},{"userId":"User3","password":null,"name":"User3","role":"role3","phone":"9874020203","email":"[email protected]","msg":null,"statusCode":201}]

flq Over a year ago

row.name, and why do you paste a block of json in a comment?

Anton Melnikov Over a year ago

Just replace tableData[index] with row. You have array of objects, with map function you get a single object from that array, which is stored inside row variable. Then you access it's fields like row.name, row.password.

NDeveloper Over a year ago

@flq: I am trying to express the format the way I am getting the data.

Collectives™ on Stack Overflow

json data to render in <TableRow> in react

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related