Source:  Twitter logo

I am pretty new to Reactjs and i have a component that loads json from my db that looks like this

0: Object
_id: "56cf587fe46adb3b8960afe2"
price: 2000
title: "ps3"
url: ""
__proto__: Object
1: Object
_id: "56db2bd434df9046e0643d22"
price: 499
url: ""
__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
                          <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>
                          <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 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>   </td>
                          <td>   </td>
                          <td>   </td>
                          <td className="text-right"><h3><strong>$31.53</strong></h3></td>
    //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?

You can map the array and pass the data through to the html

        { listValue, index ) => {
          return (
            <tr key={index}>
27 users liked answer #0dislike answer #027
Guy profile pic

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: "",
  }, {
    _id: "56db2bd434df9046e0643d22",
    price: 499,
    title: "HENRIKSDAL",
    url: "",

var Hello = React.createClass({
  renderRow(props) {
    return (
        <td>{ props._id }</td>
        <td>{ props.price }</td>
        <td>{ props.title }</td>
        <td>{ props.url }</td>

  render: function() {
    return (
        { }

  <Hello rows={rows} />,

Working Fiddle

4 users liked answer #1dislike answer #14
Andreyco profile pic

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) => (
  <p>Your Table</p>
    {,i) => <Row key={i} data={x} />) }

const Row = (props:any) => (

See JSFiddle

1 users liked answer #2dislike answer #21
wal profile pic

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).