Como mapear uma matriz aninhada em um componente React

A maioria dos aplicativos modernos consome dados externos de outros aplicativos e ferramentas por meio de APIs. Esse os dados vêm em todos os tipos de esquemas e cabe a você desconstruí-los até obter o que deseja usar. Entre esses esquemas estão os objetos de dados que contêm matrizes aninhadas. Pode ser desafiador renderizar esse tipo de dados. Este artigo ensinará como mapear um array aninhado em um componente React.

Usando a função de mapa

A função map percorre os itens de uma determinada matriz e retorna a instrução ou código especificado para cada um.

Para uma matriz plana, a função map funciona da seguinte maneira:

const arr = ['a', 'b', 'c'];
const resultado1 = arr.map (elemento => {
retornar elemento;
});

No React, você deve envolver a função map com chaves e usar um função de seta para retornar um elemento de nó para cada iteração. Os itens na matriz plana acima podem ser renderizados como elementos JSX como este:

const arr = ['a', 'b', 'c']; 
funçãoAplicativo () {
retornar (
<>
 {arr.map((item, índice) => {
<chave de extensão ={índice}>{a}</span>
 })}
</>
	)
}

Observe que você atribui uma chave para cada elemento que a função map retorna. Isso ajuda o React a identificar itens que foram alterados ou removidos. Isso é importante durante o processo de reconciliação.

Mapeando sobre uma matriz aninhada em um componente React

Uma matriz aninhada é semelhante a uma matriz que contém outra matriz. Por exemplo, a matriz de receita a seguir contém um objeto com uma matriz.

const receitas = [
 {
 id: 716429,
 título: "Macarrão com alho, cebolinha, couve-flor & Migalhas de pão",
 imagem: "<https://spoonacular.com/recipeImages/716429-312x231.jpg>",
 Tipos de pratos: [
"almoço",
"Prato principal",
"prato principal",
"jantar"
 ],
 receita: {
// dados da receita
 }
 }
]

Para dados como este com arrays aninhados, você deve usar uma função map para cada array.

Neste exemplo, você mapearia a matriz de dados conforme mostrado abaixo:

exportarpadrãofunçãoreceitas() {
retornar (
<div>
 {receitas.map((receita) => {
 retornar <chave div={receita.id}>
<h1>{receita.título}</h1>
<img src={receita.imagem} alt="imagem da receita" />
 {receita.dishTypes.map((tipo, índice) => {
 retornar <chave de extensão ={índice}>{tipo}</span>
 })}
</div>
 })}
</div>
 )
}

O componente Receitas renderizará o div elemento contendo os dados da receita para cada receita na matriz de receitas.

Trabalhando com Arrays em JavaScript

O JavaScript oferece uma ampla variedade de métodos de array que simplificam o trabalho com arrays. Este artigo demonstrou como renderizar dados de uma matriz aninhada usando um método de matriz de mapa. Além do mapa, também existem métodos para ajudá-lo a enviar dados para uma matriz, concatenar duas matrizes ou até mesmo classificar uma matriz.