Render A Nested Array Of Objects In React
I map through multiple objects. [{name:'y', country:'US', cities:[obj,obj,ob]},{name:'y', country:'US', cities:[obj,obj,ob]}] How can I nest a loop so I first iterate through t
Solution 1:
you can make use of nested map to map over the inner child obejcts as well like
render() {
const persons = this.state.name.map((item, i) => {
return (
<div>
<h5> {item.name} </h5>
<h5> {item.country} </h5>
<h4>{item.cities.map((city) => {
return (<li>{/* city object details here*/}</li>)
})}</h4>
</div>);
});
return (
<div>
<div className = "panel-list">
All: {persons}
</div>
</div>
);
}
Post a Comment for "Render A Nested Array Of Objects In React"