Ao trabalhar com aplicativos da web modernos, é comum renderizar coleções de dados recebidos do backend. Para realizar isso, utilizamos o método map(). Dentro do método map(), empregamos uma função de retorno de chamada e retornamos JSX para renderizar a saída desejada.

Vamos usar um exemplo para ilustrar como isso funciona. Teremos um componente App que passará a propriedade toys, um vetor de objetos. O componente ToyCard utilizará o método map() para renderizar cada brinquedo no vetor.

// Dados do backend
const toysData = [
  { id: "id-1", nome: "Unicórnio de Pelúcia Arco-Íris Brilhante" },
  { id: "id-2", nome: "Conjunto de Aventura na Selva" },
  { id: "id-3", nome: "Castelo de Bonecas da Princesa Mágica" },
  { id: "id-4", nome: "Robô Transformador RoboBot" },
  { id: "id-5", nome: "Figura de Ação SuperBlast" },
];

// Componente filho
const ToyCard = (props) => (
  <ul>
    {props.toys.map((brinquedo) => (
      <li>{brinquedo.nome}</li>
    ))}
  </ul>
);

// Componente pai
const App = () => (
  <>
    <ToyCard toys={toysData} />
  </>
);

Nas linhas 13-15, observamos a utilização do método map(). Ele nos permite iterar por cada item do array, extrair seu valor e gerar uma marcação específica com base nos dados de cada item.

Código completo do aplicativo:

No entanto, se prestarmos atenção no console, podemos descobrir que recebemos o aviso: Cada filho em uma lista deve ter uma propriedade "key" única..

Chave

A chave é uma propriedade de string crucial que deve ser atribuída ao criar elementos dentro de uma coleção.

O React utiliza chaves para assegurar uma identidade estável para os elementos dentro de uma coleção. Essas chaves permitem que o React identifique quais elementos precisam ser re-renderizados e recriados quando ocorrem mudanças, em vez de recriar toda a coleção. O uso de chaves previne a recriação desnecessária de elementos, levando a uma melhoria no desempenho.

Nota

A chave deve ser única entre os elementos vizinhos. Ela deve permanecer constante e não mudar ao longo do tempo.

É comumente recomendado utilizar identificadores, como valores de id de dados de backend, como props de chave. Essa prática permite que o React identifique e gerencie elementos individuais dentro de uma coleção de forma eficaz.

Vamos corrigir nosso aplicativo anterior usando as props de chave para os itens:

// Dados do backend
const toysData = [
  { id: "id-1", nome: "Pelúcia Unicórnio Arco-Íris Brilhante" },
  { id: "id-2", nome: "Conjunto de Aventura na Selva" },
  { id: "id-3", nome: "Castelo de Princesa Mágico Boneca" },
  { id: "id-4", nome: "Robô Transformador RoboBot" },
  { id: "id-5", nome: "Figura de Ação SuperBlast" },
];

// Componente filho
const ToyCard = (props) => (
  <ul>
    {props.toys.map((brinquedo) => (
      <li key={brinquedo.id}>{brinquedo.nome}</li>
    ))}
  </ul>
);

// Componente pai
const App = () => (
  <>
    <ToyCard toys={toysData} />
  </>
);

Linha 14: a prop key é definida no elemento que será renderizado várias vezes dentro de um array de dados.

Código completo do aplicativo: