Unikátne kľúče v poli tagov v React

V predchádzajúcom príklade sme vytvárali naše odseky v cykle, takto:

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

Bude to fungovať, avšak, ak sa pozrieme do konzoly - uvidíme chybu: Warning: Each child in an array or iterator should have a unique "key" prop. V tomto prípade React vyžaduje, aby sme každému tagu z cyklu dali unikátne číslo, aby React mohol jednoduchšie s týmito tagmi pracovať v budúcnosti.

Toto číslo sa pridáva pomocou atribútu key. V tomto prípade ako číslo môžeme vziať číslo prvku v poli. V našom prípade toto číslo je uložené v premennej index a tak opravený riadok bude vyzerať takto:

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

Spustíme - chyba z konzoly zmizne:

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šte raz: tento atribút key má servisný význam pre React, hlbšie pochopíte tento bod v nasledujúcich lekciách. Zatiaľ jednoducho vedzte: ak vidíte takúto chybu - pridajte atribút key s unikátnou hodnotou pre každý tag a problém zmizne.

Kľúč key musí byť unikátny len v rámci tohto cyklu, v inom cykle hodnoty key sa môžu zhodovať s hodnotami z iného cyklu.

Upravte vaše riešenie predchádzajúcej úlohy v súlade s popísaným.