Usar map para exibir dados dentro de uma matriz

Concluído

Você trabalhará muitas vezes com coleções de dados armazenados em uma matriz. Embora trabalhar com os dados de matriz seja semelhante a trabalhar com qualquer outro objeto, você precisa da capacidade de executar um loop nos dados e exibi-los para o usuário. Isso é feito no JSX usando código JavaScript. Em particular, você usa a função map.

map permite criar uma cópia modificada de uma matriz. Isso é útil quando é preciso converter os valores de uma matriz para fins de exibição. Para exibir valores a um usuário, insira-os dentro de um elemento HTML. Esse é um trabalho ideal para map. Com map, é possível criar uma matriz que consiste em HTML contendo valores individuais na matriz para exibição.

Use map.

map comporta-se de forma semelhante a um loop for...of ou a um método forEach. Ele é executado uma vez para cada item na matriz. A principal diferença é que ele gera uma nova matriz com os valores retornados pela função passada para map.

Vamos explorar map observando como você pode criar uma matriz com base em uma existente com os números ao quadrado. Comece criando uma matriz de números.

const numbers = [2, 5, 8];

Use map. map aceita uma função com um único parâmetro. O parâmetro será definido como o valor de cada número na matriz original. Você criará uma função anônima para essa finalidade usando => ou a sintaxe de seta grossa.

const squared = numbers.map((number) => {
    return number * number;
});

squared é uma nova matriz que contém os números originais ao quadrado. Se você os exibiu usando console.log, verá o seguinte:

console.log(squared);
// Output: [4, 25, 64]

Acessar o índice para gerar uma chave

Quando exibir listas no React, defina uma chave para cada item. Isso permite que o React e você façam referência a itens individuais que estão sendo exibidos no momento e relacione-os de volta aos dados associados. A maneira mais comum de gerar uma chave é usar o índice do item na matriz.

Ao usar um loop for, você gera um índice inerentemente como parte da sintaxe. Ao usar map, você pode acessar o índice usando um segundo parâmetro na função de delegação. O segundo parâmetro é definido automaticamente como o índice atual.

const squared = numbers.map((number, index) => {
    console.log(`Processing item ${index + 1}`);
    return number * number;
});

map com React

Conforme realçado em um exemplo anterior, você normalmente pode usar map para exibir uma lista de itens. A principal diferença é que, em vez de retornar números (como no exemplo), você retorna JSX. O React tem uma diretriz de que todos os itens exibidos devem ter uma chave. Caso os itens que você esteja exibindo não tenham uma chave natural, é comum usar o índice. Por exemplo, se você quiser exibir seus números ao quadrado em elementos div, poderá usar o seguinte:

const squared = numbers.map((number, index) => {
    return (
        <div key={index}>{ number * number }</div>
    );
});

Você pode usar squared da mesma maneira que outras variáveis em JSX. Se adicionou { squared } ao JSX em outro lugar, ele renderizará a coleção de elementos div com seus números atualizados.