Edinstveni ključi v matriki oznak v Reactu

V prejšnjem primeru smo oblikovali naše odstavke v zanki, takole:

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

To bo delovalo, vendar, če pogledamo v konzolo - bomo videli napako: Warning: Each child in an array or iterator should have a unique "key" prop. V tem primeru React zahteva, da vsaki oznaki iz zanke damo edinstveno številko, da bo React lažje delal s temi oznakami v prihodnje.

Ta številka se doda z uporabo atributa key. V tem primeru lahko kot številko vzamemo številko elementa v matriki. V našem primeru je ta številka shranjena v spremenljivki index in zato bo popravljena vrstica izgledala takole:

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

Zaženimo - napaka iz konzole bo izginila:

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

Še enkrat: ta atribut key ima servisni pomen za React, bolj poglobljeno boste razumeli to točko v naslednjih lekcijah. Za zdaj samo vedite: če vidite takšno napako - dodajte atribut key z edinstveno vrednostjo za vsako oznako in težava bo izginila.

Ključ key mora biti edinstven samo znotraj te zanke, v drugi zanki se vrednosti key lahko ujemajo z vrednostmi iz druge zanke.

Spremenite vašo rešitev prejšnje naloge v skladu z opisanim.