Unikke nøgler i array af tags i React

I det forrige eksempel dannede vi vores afsnit i en løkke, sådan her:

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

Dette vil virke, men hvis vi kigger i konsollen - vil vi se en fejl: Warning: Each child in an array or iterator should have a unique "key" prop. I dette tilfælde kræver React, at vi giver hvert tag fra løkken et unikt nummer, så React har lettere ved at arbejde med disse tags senere.

Dette nummer tilføjes ved hjælp af attributten key. I dette tilfælde kan vi tage elementets indeks i arrayet som nummer. I vores tilfælde er dette nummer gemt i variablen index, hvilket betyder at den korrigerede linje vil se sådan ud:

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

Lad os køre det - fejlen i konsollen forsvinder:

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

Igen: denne attribut key har en funktionel betydning for React, du vil forstå dette punkt mere dybt i de følgende lektioner. For nu, vær bare opmærksom på: hvis du ser sådan en fejl - tilføj attributten key med en unik værdi for hvert tag, og problemet forsvinder.

Nøglen key skal kun være unik inden for denne løkke, i en anden løkke kan værdierne for key være de samme som værdierne fra en anden løkke.

Modificer din løsning på den forrige opgave i overensstemmelse med det beskrevne.