Unika nycklar i array av taggar i React

I föregående exempel skapade vi våra stycken i en loop, så här:

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

Detta kommer att fungera, men om vi tittar i konsolen - kommer vi att se ett fel: Warning: Each child in an array or iterator should have a unique "key" prop. I det här fallet kräver React att vi ger varje tagg från loopen ett unikt nummer, så att React lättare kan arbeta med dessa taggar i framtiden.

Detta nummer läggs till med hjälp av attributet key. I det här fallet kan vi ta elementets index i arrayen som nummer. I vårt fall lagras detta nummer i variabeln index och därför kommer den korrigerade raden att se ut så här:

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

Låt oss köra - felet i konsolen kommer att försvinna:

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

Återigen: detta attribut key har ett funktionellt värde för React, du kommer att förstå denna punkt mer ingående i de följande lektionerna. Tills vidare, bara kom ihåg: om du ser ett sådant fel - lägg till attributet key med ett unikt värde för varje tagg och problemet kommer att försvinna.

Nyckeln key behöver bara vara unik inuti denna loop, i en annan loop kan värdena för key sammanfalla med värden från en annan loop.

Modifiera din lösning av föregående uppgift i enlighet med det som beskrivits.