Compreendendo como renderizar matrizes no React

Introdução

Este artigo irá ensinar como renderizar uma matriz no React, além das melhores práticas para usar ao renderizar diferentes elementos dentro de componentes.

Uma das vantagens de usar uma linguagem Web moderna como o JavaScript é a possibilidade de automatizar rapidamente a geração de porções de HTML.

Usar algo como um loop em uma matriz ou um objeto significa que só é necessário escrever o HTML uma vez por item. Melhor ainda, qualquer edição futura precisaria ser aplicada apenas uma vez.

Renderizando vários elementos

Para renderizar vários elementos JSX no React, você pode percorrer uma matriz com um loop com o método .map() e retornar um único elemento.

Abaixo, um loop é usado em uma matriz reptiles e um elemento li é retornado para cada item nela. Use este método quando quiser exibir um único elemento para cada item na matriz:

function ReptileListItems() {
  const reptiles = ["alligator", "snake", "lizard"];

  return reptiles.map((reptile) => <li>{reptile}</li>);
}

O resultado ficará parecido com este:

Output
- alligator
- snake
- lizard

No exemplo a seguir, você irá examinar por que adicionar uma key única a uma lista de elementos renderizados por uma matriz.

Renderizando uma coleção de elementos dentro de um componente

Neste exemplo, você percorre uma matriz com um loop e cria uma série de componentes de item de lista como no exemplo anterior.

Para iniciar, atualize o código a fim de usar o componente <ol> e manter os itens <li>. O componente <ol> irá criar uma lista ordenada dos itens:

function ReptileList() {
  const reptiles = ["alligator", "snake", "lizard"];

  return (
    <ol>
      {reptiles.map((reptile) => (
        <li>{reptile}</li>
      ))}
    </ol>
  );
}

No entanto, se olhar para o console, você verá um aviso de que cada filho em uma matriz ou iterador deve possuir uma chave única.

O aviso aparece porque quando você tenta renderizar uma coleção dentro de um componente, é necessário adicionar uma key.

No React, uma key única é usada para determinar qual dos componentes em uma coleção precisa ser renderizado novamente. Adicionar uma key única impede o React de precisar renderizar novamente o componente inteiro cada vez que houver uma atualização.

Neste passo, você irá renderizar vários elementos em um componente e adicionar uma chave única. Atualize o código para incluir uma key nos itens de lista para solucionar o aviso:

function ReptileList() {
  const reptiles = ['alligator', 'snake', 'lizard'];

  return (
    <ol>
      {reptiles.map(reptile => (
        <li key={reptile}>{reptile}</li>
      ))}
    </ol>
  );
}

Agora que você adicionou uma key, o aviso não estará mais no console.

No exemplo seguinte, você verá como renderizar elementos adjacentes sem encontrar um erro de sintaxe comum.

Renderizando elementos adjacentes

No JSX, para renderizar mais de um elemento em um componente, é necessário adicionar um wrapper em volta deles.

Neste exemplo, você irá primeiro retornar uma lista de itens sem percorrer um loop por uma matriz:

function ReptileListItems() {
  return (
    <li>alligator</li>
    <li>snake</li>
    <li>lizard</li>
  );
}

Isso lhe dará um erro de sintaxe no console:

Para corrigir esse erro, é necessário encapsular o bloco de elementos li em um wrapper. Para uma lista, é possível encapsulá-los em um elemento ol ou ul:

function ReptileListItems() {
  return (
  <ol>
    <li>alligator</li>
    <li>snake</li>
    <li>lizard</li>
  </ol>
  );
}

Os elementos <li> adjacentes agora estão encapsulados em uma tag de fechamento, <ol>, e você não verá mais um erro.

Na seção seguinte, você irá renderizar uma lista em um wrapper usando um componente fragment.

Renderizando elementos adjacentes com o React.fragment

Antes do React v16.2, era possível encapsular um bloco de componentes em um elemento <div>. Isso geraria um aplicativo cheio de divs, muitas vezes conhecido como “sopa de div”.

Para corrigir esse problema, o React lançou um novo componente conhecido como o componente fragment:

Quando precisar renderizar uma lista dentro de uma tag de fechamento, mas não quiser usar um div, use o React.Fragment como alternativa:

function ReptileListItems() {
  return (
  <React.Fragment>
     <li>alligator</li>
     <li>snake</li>
     <li>lizard</li>
  </React.Fragment>
  );
}

O código renderizado irá incluir apenas os elementos li e o componente React.Fragment não aparecerá no código.

Além disso, observe que não é necessário adicionar uma chave com o React.fragment.

Você pode achar que escrever o React.fragment é mais enfadonho do que adicionar um <div>. Felizmente, a equipe do React desenvolveu uma sintaxe mais curta para representar este componente. Você pode usar <> </> no lugar de <React.Fragment></React.Fragment>:

function ReptileListItems() {
  return (
 <>
    <li>alligator</li>
    <li>snake</li>
    <li>lizard</li>
 </>
  );
}

Conclusão

Neste artigo, você explorou vários exemplos de como renderizar matrizes em um aplicativo React.

Ao renderizar um elemento dentro de outro componente, é recomendável usar uma key única e encapsular seus elementos dentro de um elemento wrapper.

Dependendo do seu caso de uso, é possível criar listas simples encapsuladas em um componente fragment que não precisa de uma chave.

Para aprender mais sobre as melhores práticas com o React, siga a série completa Como programar no React.js da DigitalOcean.