Iterating over JSON in React

user_5012854 0
Viewed 85419

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 ?

jsx reactjs javascript
5 Answers

//let myJSON={"attr1":"abcdef", "attr2":"12345", "attr3":"hello"};

<p>
    {Object.keys(myJSON).map((innerAttr, index) => {
        return (
            <span key={index}> {innerAttr}:  {myJSON[innerAttr]}<br/></span>
        )})
    }
</p>

user_18044490
Related