Esse artigo ensinará como percorrer sobre um array aninhado em um componente React, pois muitas aplicações modernas consomem dados externos de outros aplicativos e ferramentas através de APIs. Estes dados vêm em vários tipos de esquemas e caberá a você desconstruí-los até obter o que deseja usar. Entre esses esquemas estão objetos de dados que contêm arrays aninhados, e pode ser desafiador renderizar esse tipo de dados.

Usando a função MAP

A função map itera sobre os itens de um determinado array e retorna a afirmação ou o código especificado para cada um.

Para um array simples, a função map funciona da seguinte maneira:

const arr = ['a', 'b', 'c'];

const result1 = arr.map(element => {
  return element;
});

No React, você deve envolver a função map com chaves e usar uma arrow function para retornar um elemento de nó para cada iteração. Os itens no array simples acima podem ser renderizados como elementos JSX assim:

const arr = ['a', 'b', 'c']; 

function App () {
 return (
   <>
     {arr.map((item, index) => {
       <span key={index}>{a}</span>
     })}
   </>
 )
}

Observe que você atribui uma chave (key) a cada elemento que a função map retorna. Isso ajuda o React a identificar itens que foram alterados ou removidos.

Percorrendo um Array Aninhado em um Componente React

Um array aninhado é semelhante a um array que contém outro array. Por exemplo, o seguinte array de receitas contém um objeto com um array.

const recipes = [
    {
        id: 716429,
        title: "Chocolate cake",
        image: "<https://example.com/recipeImages/example-312x231.jpg>",
        dishTypes: [
            "lunch",
            "main course"
        ],
        recipe: {
            // recipe data
        }
    }
]

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

Neste exemplo, você mapearia sobre o array de dados como mostrado abaixo:

export default function Recipes() {
    return (
        <div>
            {recipes.map((recipe) => {
                return <div key={recipe.id}>
                    <h1>{recipe.title}</h1>
                    <img src={recipe.image} alt={recipe.title} />

                    {recipe.dishTypes.map((type, index) => {
                        return <span key={index}>{type}</span>
                    })}
                </div>
            })}
        </div>
    )
}

O componente Recipes irá renderizar o elemento div contendo os dados da receita para cada receita no array de receitas.

Trabalhando com Arrays no JavaScript

O JavaScript oferece uma ampla variedade de métodos de array que tornam o trabalho com arrays mais simples. Este artigo demonstrou como renderizar dados de um array aninhado usando o método map do array. Além do map, também há métodos para ajudá-lo a adicionar dados a um array, concatenar dois arrays ou até mesmo classificar um array.