How do I iterate through table rows and cells in Reactjs

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

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 Fiddlehttps://jsfiddle.net/zwdjmozn/1/

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