Listas e Chaves no React

Introdução

No React, você frequentemente precisará exibir múltiplos componentes semelhantes a partir de uma coleção de dados. Você pode usar métodos de array do JavaScript, como map(), para manipular um array de dados e transformá-lo em um array de elementos JSX.

Uma "key" é um atributo de string especial que você precisa incluir ao criar listas de elementos. As keys ajudam o React a identificar quais itens foram alterados, adicionados ou removidos. Isso permite que o React atualize a interface do usuário de forma eficiente.

Neste laboratório, você aprenderá como pegar um array de dados, transformá-lo em uma lista de componentes e renderizá-lo, ao mesmo tempo em que compreende o papel crítico da prop key.

Criar array de itens no componente

Nesta etapa, você começará definindo os dados que deseja exibir como uma lista. Na maioria das aplicações, esses dados viriam de uma API ou de um banco de dados, mas para este laboratório, definiremos um array simples diretamente dentro do nosso componente.

Primeiro, certifique-se de estar no diretório correto. Sua aplicação React my-app foi criada no diretório /home/labex/project.

Usando o explorador de arquivos no lado esquerdo do WebIDE, abra o arquivo my-app/src/App.jsx.

Dentro da função do componente App, antes da instrução return, defina uma constante chamada products que será um array de strings.

function App() {
  const products = ["Laptop", "Mouse", "Keyboard", "Monitor"];

  return (
    <>
      <h1>My Product List</h1>
    </>
  );
}

export default App;

Neste ponto, o array está definido, mas ainda não foi renderizado. A próxima etapa mostrará como exibir esses dados.

Mapear array para elementos JSX com o método map

Nesta etapa, você usará o método map() do JavaScript para transformar seu array products em uma lista de elementos JSX. O método map() cria um novo array chamando uma função em cada elemento do array original.

Mapearemos cada string de produto para um elemento <li> (item de lista).

Modifique seu arquivo src/App.jsx. Dentro da instrução return, incorpore a lógica de mapeamento entre chaves {}.

function App() {
  const products = ["Laptop", "Mouse", "Keyboard", "Monitor"];

  const listItems = products.map((product) => <li>{product}</li>);

  return (
    <>
      <h1>My Product List</h1>
      {listItems}
    </>
  );
}

export default App;

Agora, vamos instalar as dependências do projeto e iniciar o servidor de desenvolvimento para ver o resultado.

Abra um novo terminal no WebIDE. Primeiro, navegue até o diretório do seu projeto:

cd my-app

Em seguida, instale as dependências:

npm install

Finalmente, inicie o servidor de desenvolvimento. As flags --host e --port são necessárias para tornar a aplicação acessível dentro do ambiente LabEx.

npm run dev -- --host 0.0.0.0 --port 8080

Após o servidor iniciar, mude para a aba Web 8080 na sua interface LabEx. Você deverá ver sua lista de produtos. No entanto, se você abrir o console do desenvolvedor do navegador (Clique com o botão direito -> Inspecionar -> Console), verá um aviso: Warning: Each child in a list should have a unique "key" prop. Corrigiremos isso na próxima etapa.

Atribuir prop 'key' única a cada item da lista

Nesta etapa, você corrigirá o aviso do console fornecendo uma key única a cada item da lista. As chaves são cruciais para que o React rastreie a identidade de cada item, o que ajuda a renderizar eficientemente a lista quando os dados mudam.

A melhor maneira de escolher uma chave é usar uma string que identifique unicamente um item da lista entre seus irmãos. Na maioria das vezes, você usaria IDs dos seus dados.

Vamos modificar nossos dados para serem um array de objetos, onde cada objeto tem um id único. Atualize src/App.jsx da seguinte forma. Usaremos o id de cada produto como sua chave.

function App() {
  const products = [
    { id: "p1", name: "Laptop" },
    { id: "p2", name: "Mouse" },
    { id: "p3", name: "Keyboard" },
    { id: "p4", name: "Monitor" }
  ];

  const listItems = products.map((product) => (
    <li key={product.id}>{product.name}</li>
  ));

  return (
    <>
      <h1>My Product List</h1>
      {listItems}
    </>
  );
}

export default App;

Observe a prop key={product.id} adicionada ao elemento <li>. A chave é uma prop especial que é usada internamente pelo React e não é passada para o seu componente.

Após salvar o arquivo, verifique novamente a aba Web 8080 e o console do desenvolvedor. A lista deverá renderizar como antes, mas o aviso sobre chaves ausentes terá desaparecido.

Usar índice como 'key' se nenhum ID único estiver disponível

Nesta etapa, você aprenderá como lidar com situações em que seus dados não possuem IDs estáveis e únicos. Nesses casos, você pode usar o índice do item no array como último recurso.

A função map() fornece o índice do item atual como um segundo argumento opcional. Você pode usar este índice para a chave.

Vamos reverter nosso array products para um array simples de strings e usar o índice como chave. Modifique src/App.jsx:

function App() {
  const products = ["Laptop", "Mouse", "Keyboard", "Monitor"];

  const listItems = products.map((product, index) => (
    <li key={index}>{product}</li>
  ));

  return (
    <>
      <h1>My Product List</h1>
      {listItems}
    </>
  );
}

export default App;

Nota Importante: Usar o índice como chave não é recomendado se a ordem dos itens puder mudar. Isso pode impactar negativamente o desempenho e causar problemas com o estado do componente. Se você ordenar, adicionar ou remover itens da lista, os índices mudarão, o que pode confundir o algoritmo de renderização do React. Use-o apenas se a lista for estática e nunca for reordenada.

Renderizar lista mapeada dentro de tag ul ou ol

Nesta etapa, você envolverá seus itens de lista em uma tag <ul> (lista não ordenada) ou <ol> (lista ordenada). Isso é importante para criar HTML semanticamente correto, o que é bom para acessibilidade e SEO.

Atualmente, estamos renderizando uma série de elementos <li> diretamente dentro de um fragmento (<>...</>). Vamos envolver nossa variável listItems em uma tag <ul> para criar uma lista não ordenada adequada.

Atualize seu src/App.jsx com o código final:

function App() {
  const products = ["Laptop", "Mouse", "Keyboard", "Monitor"];

  const listItems = products.map((product, index) => (
    <li key={index}>{product}</li>
  ));

  return (
    <>
      <h1>My Product List</h1>
      <ul>{listItems}</ul>
    </>
  );
}

export default App;

Agora, volte para a aba Web 8080. Você verá que sua lista está agora formatada corretamente com marcadores, como esperado de um elemento HTML <ul> padrão. Você renderizou com sucesso uma lista dinâmica em React com chaves corretas e HTML semântico.

Resumo

Parabéns por completar o laboratório!

Neste laboratório, você aprendeu os conceitos fundamentais de renderização de listas em React. Você praticou:

• Definir um array de dados dentro de um componente.
• Usar o método map() para transformar um array de dados em um array de elementos JSX.
• A importância crítica da prop key para itens de lista, para ajudar o React com a renderização eficiente.
• Como usar IDs estáveis e únicos dos seus dados como chaves.
• Como usar o índice do array como chave como último recurso e as potenciais desvantagens de fazê-lo.
• Envolver seus itens de lista em <ul> ou <ol> para HTML semântico.

Essas habilidades são essenciais para construir aplicações dinâmicas e orientadas a dados com React.