Neste artigo você vai aprender porque adicionar uma key no loop de arrays em React, e qual o motivo desta chave única
Fala programador(a), beleza? Bora aprender mais sobre arrays, loop, unique key e React!
Ao realizar um loop em um array ou array de objetos é comum receber o seguinte erro:
Each child in an array should have a unique "key" prop.
Isso acontece por que o React precisa de uma chave única, no atributo key de cada item do loop
Este recurso adiciona mais performance a aplicação, tornando o elemento único
Dando uma identidade a este elemento
O React não coloca as chaves automaticamente, o que parece ser muito simples a primeira vista, por uma questão de modelagem de dados
Ele não sabe como os nossos dados são modelados, se abstendo então desta responsabilidade
Qual a melhor maneira de declarar uma key única?
A melhor abordagem é que o elemento em si tenha um id único, que pode ser o id de cadastro no banco de dados
Exemplo:
<div>
{items.map((item) => {
return <p key={item.id}>{item.title}</p>;
})}
</div>Este é o cenário perfeito para o React
E se o item não tem um id único?
Acontece também! Então podemos colocar o índice do loop do método map
Veja um exemplo de item sem id:
<div>
{items.map((item, index) => {
return <p key={index}>{item}</p>;
})}
</div>Não é a abordagem mais aconselhável, mas resolve o problema também
O warning de key única é desativado
Conclusão
Neste artigo você aprendeu porque adicionar uma key no loop de arrays em React
É uma questão de performance, mas também faz parte da arquitetura da biblioteca
Precisamos adicionar a key única a cada item da repetição para também garantir o pleno funcionamento do React
Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!
Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!
Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias
O link acima contém um cupom de desconto para os cursos!