Render a nested array of objects in react

Question

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

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