Clés uniques dans un tableau de balises en React

Dans l'exemple précédent, nous avons formé nos paragraphes dans une boucle, comme ceci :

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

Cela fonctionnera, cependant, si vous regardez dans la console - nous verrons une erreur : Warning: Each child in an array or iterator should have a unique "key" prop. Dans ce cas, React exige que nous donnions un numéro unique à chaque balise de la boucle, pour que React puisse plus facilement travailler avec ces balises par la suite.

Ce numéro est ajouté via l'attribut key. Dans ce cas, en tant que numéro, nous pouvons prendre l'index de l'élément dans le tableau. Dans notre cas, cet index est stocké dans la variable index et donc la ligne corrigée ressemblera à ceci :

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

Lançons - l'erreur dans la console disparaîtra :

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>;
}

Encore une fois : cet attribut key a une signification technique pour React, vous comprendrez ce point plus en profondeur dans les prochaines leçons. Pour l'instant, sachez simplement : si vous voyez une telle erreur - ajoutez l'attribut key avec une valeur unique pour chaque balise et le problème disparaîtra.

La clé key doit être unique uniquement à l'intérieur de cette boucle, dans une autre boucle les valeurs de key peuvent coïncider avec les valeurs d'une autre boucle.

Modifiez votre solution de la tâche précédente conformément à ce qui est décrit.