Jedinstveni ključevi u nizu tagova u React-u

U prethodnom primeru smo formirali naše pasuse u petlji, ovako:

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

Ovo će raditi, međutim, ako pogledamo u konzolu - videćemo grešku: Warning: Each child in an array or iterator should have a unique "key" prop. U ovom slučaju React zahteva da svakom tagu iz petlje damo jedinstveni broj, kako bi React-u bilo lakše da sa ovim tagovima radi u budućnosti.

Ovaj broj se dodaje pomoću atributa key. U ovom slučaju kao broj možemo uzeti broj elementa u nizu. U našem slučaju ovaj broj se čuva u promenljivoj index što znači da će ispravljena linija izgledati ovako:

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

Hajde da pokrenemo - greška iz konzole će nestati:

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

Još jednom: ovaj atribut key ima službeno značenje za React, dublje ćete razumeti ovaj moment u narednim lekcijama. Za sada samo znajte: ako vidite ovakvu grešku - dodajte atribut key sa jedinstvenom za svaki tag vrednošću i problem će nestati.

Ključ key mora biti jedinstven samo unutar ove petlje, u drugoj petlji vrednosti key mogu da se poklapaju sa vrednostima iz druge petlje.

Modifikujte vaše rešenje prethodnog zadatka u skladu sa opisanim.