Unieke sleutels in een array van tags in React

In het vorige voorbeeld vormden we onze alinea's in een lus, zo:

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

Dit zal werken, maar als we in de console kijken, zien we een fout: Warning: Each child in an array or iterator should have a unique "key" prop. In dit geval eist React dat we aan elke tag uit de lus een uniek nummer geven, zodat React het gemakkelijker heeft om met deze tags te werken in de toekomst.

Dit nummer wordt toegevoegd met behulp van het attribuut key. In dit geval kunnen we als nummer het nummer van het element in de array nemen. In ons geval wordt dit nummer opgeslagen in de variabele index en dus zal de gecorrigeerde regel er zo uitzien:

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

Laten we het uitvoeren - de fout in de console verdwijnt:

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

Nogmaals: dit attribuut key heeft een service betekenis voor React, je zult dit punt dieper begrijpen in de volgende lessen. Weet voor nu gewoon: als je zo'n fout ziet - voeg dan het attribuut key toe met een voor elke tag unieke waarde en het probleem verdwijnt.

De sleutel key hoeft alleen uniek te zijn binnen deze lus, in een andere lus kunnen de waarden van key overeenkomen met waarden uit een andere lus.

Pas je oplossing van de vorige taak aan volgens de beschreven methode.