Uniikit avaimet tagien taulukossa Reactissa

Edellisessä esimerkissä muodostimme kappaleet silmukassa, näin:

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

Tämä toimii, mutta jos katsomme konsolia - näemme virheen: Warning: Each child in an array or iterator should have a unique "key" prop. Tässä tapauksessa React vaatii, että annamme jokaiselle silmukan tagille uniikin numeron, jotta Reactin on helpompi käsitellä näitä tageja myöhemmin.

Tämä numero lisätään käyttämällä attribuuttia key. Tässä tapauksessa voimme käyttää numeroona elementin numeroa taulukossa. Meidän tapauksessamme tämä numero tallennetaan muuttujaan index, mikä tarkoittaa, että korjattu rivi näyttää tältä:

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

Käynnistetään - virhe konsolista katoaa:

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

Uudelleen: tällä attribuutilla key on palvelullinen merkitys Reactille, ymmärrät tämän kohdan syvemmin seuraavissa oppitunneissa. Toistaiseksi tiedä: jos näet tällaisen virheen - lisää attribuutti key uniikilla arvolla jokaiselle tagille ja ongelma katoaa.

Avaimen key tulee olla uniikki vain tämän silmukan sisällä, toisessa silmukassa key-arvot voivat olla samat kuin arvot toisesta silmukasta.

Muokkaa ratkaisuasi edelliseen tehtävään kuvailun mukaisesti.