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