Cómo mapear sobre una matriz anidada en un componente React

La mayoría de las aplicaciones modernas consumen datos externos de otras aplicaciones y herramientas a través de las API. Este los datos vienen en todo tipo de esquemas, y depende de usted deconstruirlos hasta que obtenga lo que desea usar. Entre estos esquemas se encuentran los objetos de datos que contienen matrices anidadas. Puede ser un desafío representar este tipo de datos. Este artículo le enseñará cómo mapear una matriz anidada en un componente React.

Uso de la función de mapa

La función map recorre los elementos de una matriz determinada y devuelve la declaración o el código especificado para cada uno.

Para una matriz plana, la función de mapa funciona de la siguiente manera:

constante arr = ['a', 'b', 'C'];
constante resultado1 = arr.mapa (elemento => {
devolver elemento;
});

En React, debe envolver la función de mapa con corchetes y usar un función de flecha para devolver un elemento de nodo para cada iteración. Los elementos de la matriz plana anterior se pueden representar como elementos JSX como este:

constante arr = ['a', 'b', 'C']; 
funciónaplicación () {
devolver (
<>
 {arr.map((elemento, índice) => {
<clave de intervalo = {índice}>{a}</span>
 })}
</>
	)
}

Tenga en cuenta que asigna una clave a cada elemento que devuelve la función de mapa. Esto ayuda a React a identificar elementos que se han cambiado o eliminado. Esto es importante durante el proceso de reconciliación.

Mapeo sobre una matriz anidada en un componente React

Una matriz anidada es similar a una matriz que contiene otra matriz. Por ejemplo, la siguiente matriz de recetas contiene un objeto con una matriz.

constante recetas = [
 {
 identificación: 716429,
 título: "Pasta con Ajo, Cebolletas, Coliflor & Migas de pan",
 imagen: "<https://spoonacular.com/recipeImages/716429-312x231.jpg>",
 tipos de plato: [
"almuerzo",
"plato principal",
"plato principal",
"cena"
 ],
 receta: {
// datos de la receta
 }
 }
]

Para datos como este con matrices anidadas, debe usar una función de mapa para cada matriz.

En este ejemplo, mapearía sobre la matriz de datos como se muestra a continuación:

exportarpor defectofunciónRecetas() {
devolver (
<división>
 {recetas.map((receta) => {
 devolver <clave div={receta.id}>
<h1>{receta.título}</h1>
<img src={receta.imagen} alt="imagen de la receta" />
 {receta.dishTypes.map((tipo, índice) => {
 devolver <clave de intervalo = {índice}>{tipo}</span>
 })}
</div>
 })}
</div>
 )
}

El componente Recetas representará el división elemento que contiene los datos de receta para cada receta en la matriz de recetas.

Trabajar con arreglos en JavaScript

JavaScript ofrece una amplia variedad de métodos de matriz que simplifican el trabajo con matrices. Este artículo demostró cómo representar datos de una matriz anidada utilizando un método de matriz de mapas. Además del mapa, también hay métodos para ayudarlo a enviar datos a una matriz, concatenar dos matrices o incluso ordenar una matriz.