Renderizar uma matriz aninhada de objetos em react
Eu mapeio através de vários objetos.[{name:"y", country:"US", cities:[obj,obj,ob]},{name:"y", country:"US", cities:[obj,obj,ob]}]
Como posso aninhar um loop para primeiro iterar pelos objetos e depois percorrer (neste exemplo) as cidades?
minha função de renderização sem a aparência aninhada é assim:
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>
);
}
Exemplo de objeto de cidades:
[{visitors:34, rating:4},
{visitors:1234, rating:1},
{visitors:124, rating:2}]