How do I iterate through table rows and cells in Reactjs - arrays

Question

I am pretty new to Reactjs and i have a component that loads json from my db that looks like this
Array[2]
0: Object
_id: "56cf587fe46adb3b8960afe2"
price: 2000
title: "ps3"
url: "www.google.com"
__proto__: Object
1: Object
_id: "56db2bd434df9046e0643d22"
price: 499
title: "HENRIKSDAL"
url: "http://www.ikea.com/se/sv/catalog/products/S59847817/"
__proto__: Object
length: 2
__proto__: Array[0]
what i want to do is to load the data on to the table that looks like this
//start of loop
<tr>
<td className="col-sm-8 col-md-6">
<div className="media">
<div className="media-body">
<h4 className="media-heading">Product name</h4>
</div>
</div></td>
<td className="col-sm-1 col-md-1" styles="text-align: center">
<input type="number" name="quantity" min="1" max="10" className="form-control"/>
</td>
<td className="col-sm-1 col-md-1 text-center"><strong>500:-</strong></td>
<td className="col-sm-1 col-md-1 text-center"><strong>$14.61</strong></td>
<td className="actions" data-th="">
<button className="btn btn-info btn-sm"><i className="fa fa-refresh"></i></button>
<button className="btn btn-danger btn-sm"><i className="fa fa-trash-o"></i></button>
</td>
</tr>
<tr>
<td>   </td>
<td>   </td>
<td>   </td>
<td><h3>Total</h3></td>
<td className="text-right"><h3><strong>$31.53</strong></h3></td>
</tr>
//end of loop
But i don't know how to iterate through the array so it will create a tablerow for each object in the array. Any suggestions?

Answer 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>
);
})}

Answer 2

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/

Answer 3

This is an extension of #Andreyco answer where a separate template is defined however in my case I am referencing the JSX template within the map call (<Row />
const Table = (props) => (
<div>
<p>Your Table</p>
<table>
<tbody>
{props.rows.map((x,i) => <Row key={i} data={x} />) }
</tbody>
</table>
</div>
)
const Row = (props:any) => (
<tr>
<td>{props.data[0]}</td>
<td>{props.data[1]}</td>
<td>{props.data[2]}</td>
</tr>
)
See JSFiddle