Chaves únicas em arrays de tags no React

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

const 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:

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

Vamos executar - o erro no console desaparecerá:

function 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á.

A chave key precisa ser única apenas dentro desse loop, em outro loop os valores de key podem coincidir com os valores de outro loop.

Modifique sua solução do problema anterior de acordo com o descrito.