How do I iterate through table rows and cells in Reactjs
You can use map
method (available in prototype of Array).
Iterating can be as simple as this...
const rows = [
{
_id: "56cf587fe46adb3b8960afe2",
price: 2000,
title: "ps3",
url: "www.google.com",
}, {
_id: "56db2bd434df9046e0643d22",
price: 499,
title: "HENRIKSDAL",
url: "http://www.ikea.com/se/sv/catalog/products/S59847817/",
}
];
var Hello = React.createClass({
renderRow(props) {
return (
<tr>
<td>{ props._id }</td>
<td>{ props.price }</td>
<td>{ props.title }</td>
<td>{ props.url }</td>
</tr>
);
},
render: function() {
return (
<table>
{ this.props.rows.map(this.renderRow) }
</table>
);
}
});
ReactDOM.render(
<Hello rows={rows} />,
document.getElementById('container')
);
Working Fiddle https://jsfiddle.net/zwdjmozn/1/
You can map the array and pass the data through to the html
{this.state.data.map(( listValue, index ) => {
return (
<tr key={index}>
<td>{listValue.id}</td>
<td>{listValue.title}</td>
<td>{listValue.price}</td>
</tr>
);
})}