NDeveloper NDeveloper - 8 days ago 6
React JSX Question

json data to render in <TableRow> in react

I am trying to render a

tableData
of a format like:
enter image description here

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.

enter image description here

But the code snippet
<TableRowColumn>{tableData[index].name}</TableRowColumn>

is giving the error
Error : TypeError: Cannot read property 'name' of undefined


any suggestion please!!

Answer

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.