Как перебрать строки таблицы и ячейки в Reactjs

Question

Я довольно новый для Reactjs и у меня есть компонент, который загружает JSON из моей БД, который выглядит, как это

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] 

то, что я хочу сделать, это загрузить данные о к таблице, которая выглядит, как этот

//start of loop 
<tr> 
          <td className="col-sm-8 col-md-6"> 
          <div className="media"> 

           <div className="media-body"> 
            <h4 className="media-heading"><a href="#">Product name</a></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 

Но я не знаю, как перебрать массив так это создаст TableRow для каждого объекта в массиве. Какие-либо предложения?

Answer 1

Вы можете отобразить массив и передать данные через к 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

Вы можете использовать метод map (доступен прототип Array).
Итерация может быть так просто, как это ...

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

Рабочая Fiddle https://jsfiddle.net/zwdjmozn/1/