Unike nøkler i array av tags i React

I forrige eksempel dannet vi våre avsnitt i en loop, slik:

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

Dette vil fungere, men hvis vi ser i konsollen - vil vi se en feil: Warning: Each child in an array or iterator should have a unique "key" prop. I dette tilfellet krev React at vi gir hver tag fra loopen et unikt nummer, slik at React kan jobbe med disse tagene enklere senere.

Dette nummeret legges til ved hjelp av attributtet key. I dette tilfellet kan vi ta nummeret til elementet i arrayet som nummer. I vårt tilfelle er dette nummeret lagret i variabelen index og det betyr at den korrigerte linjen vil se slik ut:

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

La oss kjøre - feilen fra konsollen vil forsvinne:

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

Igjen: dette attributtet key har en tjenestefunksjon for React, du vil forstå dette dypere i de neste leksjonene. For nå, bare vit: hvis du ser en slik feil - legg til attributtet key med en unik verdi for hver tag, og problemet vil forsvinne.

Nøkkelen key må være unik kun innenfor denne loopen, i en annen loop kan verdiene key samsvare med verdier fra en annen loop.

Modifiser løsningen din fra forrige oppgave i henhold til det som er beskrevet.