Chaves únicas em arrays de tags no React

No exemplo anterior, nós estávamos formando nossos parágrafos em um loop, assim:

jsxconst res = arr.map(function(item) {
  return <p>{item}</p>;
});

Isso vai funcionar, no entanto, se olharmos no console - veremos um erro: Warning: Each child in an array or iterator should have a unique "key" prop. Neste caso, O React exige que para cada tag do loop seja dado um número único, para que o React tenha mais facilidade em trabalhar com essas tags posteriormente.

Este número é adicionado usando o atributo key. Neste caso, como número podemos usar o índice do elemento no array. No nosso caso, este número está armazenado na variável index e, portanto, a linha corrigida ficará assim:

jsxconst res = arr.map(function(item, index) {
  return <p key={index}>{item}</p>;
});

Vamos executar - o erro no console desaparecerá:

jsxfunction App() {
  const arr = [1, 2, 3, 4, 5];
  
  const res = arr.map(function(item, index) {
    return <p key={index}>{item}</p>;
  });
  
  return <div>
    {res}
  </div>;
}

Repetindo: este atributo key tem um significado funcional para o React, você entenderá este ponto mais profundamente nas próximas lições. Por enquanto, apenas saiba: se você vir esse erro - adicione o atributo key com um valor único para cada tag e o problema desaparecerá.