Como usar o loop `for` no React

Quando um array contém produtos, usuários ou outros registros, o React pode renderizar um elemento ou componente para cada item. Use .map() para a transformação simples de um item em um elemento, que é a opção mais comum. Escolha um loop JavaScript for quando as etapas explícitas deixarem o trabalho mais claro. As duas abordagens produzem um array de elementos que o React pode renderizar.

Renderizar listas no React com .map()

Comece pelos registros que deseja exibir. Este exemplo independente de JavaScript transforma cada produto em um rótulo; ele não usa React nem monta um componente. A saída abaixo é o resultado observado somente para este exemplo JavaScript.

const products = [
  { id: "mug", name: "Ceramic mug", price: 12 },
  { id: "notebook", name: "Notebook", price: 8 },
];

const labels = products.map((product) => `${product.name}: $${product.price}`);
console.log(labels.join("\n"));

Ceramic mug: $12
Notebook: $8

Para usar JSX, mapeie os mesmos dados para elementos: products.map((product) => <li key={product.id}>{product.name}: ${product.price}</li>). Coloque o array retornado na marcação onde a lista deve aparecer, por exemplo: <ul>{products.map((product) => <li key={product.id}>{product.name}</li>)}</ul>. O React renderiza o array diretamente; portanto, adicione um elemento contêiner somente quando a estrutura da página precisar dele. Esses trechos de JSX ilustram a renderização no React e não são cobertos pela evidência de execução JavaScript acima.

Também é possível mapear cada registro para um componente reutilizável. Defina function ProductCard(props) { return <li>{props.name}: ${props.price}</li>; } e renderize-o com products.map((product) => <ProductCard key={product.id} name={product.name} price={product.price} />). O componente filho recebe name e price no objeto props e usa esses valores para montar sua saída. Outra opção é passar o registro inteiro como product={product} e ler props.product.name e props.product.price dentro do componente. Escolha a interface que deixe claros os dados de que o componente precisa.

Cada elemento irmão produzido pelo mapeamento precisa de uma key única entre os irmãos e estável para o mesmo registro, normalmente um ID dos dados. Evite usar o índice do array quando os itens puderem ser inseridos, removidos ou reordenados: depois de uma alteração, um índice pode apontar para outro registro e fazer o React associar o estado do componente ao item errado. O React usa key para encontrar os elementos da lista durante as atualizações; esse valor não é passado ao componente filho como prop. Consulte o guia do React sobre renderização de listas para saber mais sobre chaves e renderização de listas.

Usar um loop JavaScript for

Um loop JavaScript for é útil quando você quer montar os elementos seguindo etapas explícitas. Em um componente, inicialize um array antes de return, adicione um elemento com key para cada produto e inclua o array na marcação retornada. Veja o componente completo, linha por linha; ele usa os dados products declarados acima:

function ProductList() {
const items = [];
for (let i = 0; i < products.length; i += 1) {
const product = products[i];
items.push(<li key={product.id}>{product.name}: ${product.price}</li>);
}
return <ul>{items}</ul>;
}

Este componente é uma ilustração de React/JSX e não faz parte do exemplo JavaScript executado. O loop é executado enquanto o componente prepara o resultado; uma instrução não pode aparecer diretamente dentro do JSX. Em uma transformação simples de um item em um elemento, .map() costuma ser mais curto e facilita identificar a relação entre cada registro e seu elemento. Um loop pode ser mais claro quando a montagem do resultado exige várias instruções ou etapas condicionais. Em ambos os padrões, os elementos retornados devem usar chaves estáveis.

Usar uma função imediatamente invocada

Uma expressão de função imediatamente invocada (IIFE) pode conter instruções dentro de uma expressão JSX, mas é uma opção pouco comum para renderizar uma lista. Por exemplo, a expressão JSX {(() => { const items = []; for (let i = 0; i < products.length; i += 1) { const product = products[i]; items.push(<li key={product.id}>{product.name}</li>); } return items; })()} cria e retorna um array imediatamente. Isto é uma ilustração de sintaxe, não um exemplo React executado. Mantenha o valor retornado na mesma linha de return ou coloque-o entre parênteses; uma quebra de linha logo após return pode fazer com que o JavaScript retorne undefined por causa da inserção automática de ponto e vírgula. Para listas comuns, .map() ou um loop antes do return do componente são mais fáceis de ler e manter.