Iterating over JSON in React

Question

I have following code:

export class Highlights extends React.Component {
    render() {
        return (
            <div>
                {JSON.stringify(this.props.highlights_data.data)}
            </div>
        )
    }
}

This prints out the following:

{"active":{"label":"Active","value":"12"},"automatic":{"label":"Automatic","value":"8"},"waiting":{"label":"Waiting","value":"1"},"manual":{"label":"Manual","value":"3"}}

How can I iterate over the highlights_data.data props to call another Component passing down label and value ?

Answer 1

Except for @Dan's answer, I don't believe the other answers are any helpful/useful to you as they don't iterate through your JSON object.

To do this properly, you would need to iterate through each of your keys in your JSON object. There are a few ways you can do this, one of which is with Object.keys(). Like the code snippet below.

This solution iterates through each key in your JSON object and pushes it into an array. Once you have that array, you can iterate through it with map(), as you would normally, and pass your relevant props down to another child component.:

class MyApp extends React.Component {
  render() {
    var json = {"active":{"label":"Active","value":"12"},"automatic":{"label":"Automatic","value":"8"},"waiting":{"label":"Waiting","value":"1"},"manual":{"label":"Manual","value":"3"}};
    var arr = [];
    Object.keys(json).forEach(function(key) {
      arr.push(json[key]);
    });
    return <ul>{arr.map(item => <MyAppChild key={item.label} label={item.label} value={item.value} />)}</ul>;
  }
}

class MyAppChild extends React.Component {
  render() {
    return <li>{this.props.label + " - " + this.props.value}</li>;
  }
}

ReactDOM.render(<MyApp />, document.getElementById('myapp'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="myapp"></div>

Answer 2

export class Highlights extends React.Component {
    render() {
        const { data } = this.props.highlights_data;
        return (
            <div>
                {
                  Object.keys(data).map((e, i) => {
                    <SomeComponent key={i} {...e} />
                  });
                }
            </div>
        )
    }
}

Answer 3

<div>
  {this.props.highlights_data.data.map((e, i) => 
    <SomeComponent key={i} label={e.label} value={e.value} />
  )}
</div>

You could just send in the item itself.

<SomeComponent key={i} item={e} />

And access label and value in the child with props.item.label or props.item.value.

Answer 4

var Highlight = React.createClass({
  render: function() {
    const {value, label} = this.props;
    return <div>{label}: {value}</div>;
  }
});

var Highlights = React.createClass({
  render: function() {
        const {active, automatic, waiting, manual} = this.props.highlights_data.data;
    return (
        <div>
        <Highlight {...active} />
        <Highlight {...automatic} />
        <Highlight {...waiting} />
        <Highlight {...manual} />
      </div>
    );
  }
});

const data = {data:{"active":{"label":"Active","value":"12"},"automatic":{"label":"Automatic","value":"8"},"waiting":{"label":"Waiting","value":"1"},"manual":{"label":"Manual","value":"3"}}};

ReactDOM.render(
  <Highlights highlights_data={data} />,
  document.getElementById('container')
);