Unikátní klíče v poli tagů v Reactu

V předchozím příkladu jsme vytvářeli naše odstavce v cyklu, takto:

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

Bude to fungovat, ale pokud se podíváme do konzole - uvidíme chybu: Warning: Each child in an array or iterator should have a unique "key" prop. V tomto případě React vyžaduje, aby každý tag z cyklu měl jedinečný klíč, aby React mohl s těmito tagy snadněji pracovat v budoucnu.

Tento klíč se přidává pomocí atributu key. V tomto případě jako klíč můžeme vzít index prvku v poli. V našem případě je tento index uložen v proměnné index a opravený řádek bude vypadat takto:

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

Spusťme - chyba z konzole zmizí:

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

Ještě jednou: tento atribut key má služební význam pro React, hlouběji pochopíte tento bod v následujících lekcích. Prozatím jen vězte: pokud vidíte takovou chybu - přidejte atribut key s jedinečnou hodnotou pro každý tag a problém zmizí.

Klíč key musí být jedinečný pouze uvnitř tohoto cyklu, v jiném cyklu se hodnoty key mohou shodovat s hodnotami z jiného cyklu.

Upravte vaše řešení předchozí úlohy v souladu s popsaným.