Renderizar una matriz anidada de objetos en react
Mapeo a través de múltiples objetos.[{name:"y", country:"US", cities:[obj,obj,ob]},{name:"y", country:"US", cities:[obj,obj,ob]}]
¿Cómo puedo anidar un ciclo para que primero recorra los objetos y luego recorra (en este ejemplo) las ciudades? ¡Gracias!
mi función de render sin el aspecto anidado se ve así:
render() {
const persons = this.state.name.map((item, i) => {
return (
<div>
<h5> {item.name} </h5>
<h5> {item.country} </h5>
//here I would like to show the cities
</div>
);
});
return (
<div>
<div className = "panel-list">
All: {persons}
</div>
</div>
);
}
Ejemplo de objeto de ciudades:
[{visitors:34, rating:4},
{visitors:1234, rating:1},
{visitors:124, rating:2}]