Ao trabalhar com aplicativos web modernos, é comum renderizar coleções de dados recebidos do backend. Para isso, utilizamos o método map(). Dentro do método map(), empregamos uma função de callback 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 prop toys, um array de objetos. O componente ToyCard utilizará o método map() para renderizar cada brinquedo do array.

// Data from backend
const toysData = [
  { id: "id-1", name: "Rainbow Sparkle Unicorn Plush" },
  { id: "id-2", name: "Jungle Adventure Playset" },
  { id: "id-3", name: "Magical Princess Castle Dollhouse" },
  { id: "id-4", name: "RoboBot Transformer Robot" },
  { id: "id-5", name: "SuperBlast Action Figure" },
];

// Child component
const ToyCard = (props) => (
  <ul>
    {props.toys.map((toy) => (
      <li>{toy.name}</li>
    ))}
  </ul>
);

// Parent component
const App = () => (
  <>
    <ToyCard toys={toysData} />
  </>
);

Nas linhas 13-15, observamos a utilização do método map(). Ele 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 ao console, podemos perceber que recebemos o aviso: Each child in a list should have a unique "key" prop..

Key

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

O React utiliza as keys para garantir uma identidade estável para os elementos em uma coleção. Essas keys permitem que o React identifique quais elementos precisam ser renderizados novamente e recriados quando houver alterações, em vez de recriar toda a coleção. O uso de keys evita a recriação desnecessária de elementos, resultando em melhor desempenho.

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

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

// Data from backend
const toysData = [
  { id: "id-1", name: "Rainbow Sparkle Unicorn Plush" },
  { id: "id-2", name: "Jungle Adventure Playset" },
  { id: "id-3", name: "Magical Princess Castle Dollhouse" },
  { id: "id-4", name: "RoboBot Transformer Robot" },
  { id: "id-5", name: "SuperBlast Action Figure" },
];

// Child component
const ToyCard = (props) => (
  <ul>
    {props.toys.map((toy) => (
      <li key={toy.id}>{toy.name}</li>
    ))}
  </ul>
);

// Parent component
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: