Unikalne klucze w tablicy tagów w React

W poprzednim przykładzie tworzyliśmy nasze akapity w pętli, w ten sposób:

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

To będzie działać, jednak jeśli zajrzymy do konsoli - zobaczymy błąd: Warning: Each child in an array or iterator should have a unique "key" prop. W tym przypadku React wymaga, aby każdemu tagowi z pętli nadać unikalny numer, aby React miał łatwiej pracować z tymi tagami w przyszłości.

Ten numer jest dodawany za pomocą atrybutu key. W tym przypadku jako numer możemy wziąć numer elementu w tablicy. W naszym przypadku ten numer jest przechowywany w zmiennej index i oznacza to, że poprawiona linia będzie wyglądać tak:

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

Uruchommy - błąd z konsoli zniknie:

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

Jeszcze raz: ten atrybut key ma służebne znaczenie dla React, głębiej zrozumiesz ten moment w kolejnych lekcjach. Na razie po prostu wiedz: jeśli widzisz taki błąd - dodaj atrybut key z unikalną dla każdego tagu wartością i problem zniknie.

Klucz key musi być unikalny tylko wewnątrz tej pętli, w innej pętli wartości key mogą pokrywać się z wartościami z innej pętli.

Zmodyfikuj swoje rozwiązanie poprzedniego zadania zgodnie z opisanym.