Egyedi kulcsok tömb elemeiben a Reactban

Az előző példában a bekezdéseinket egy ciklusban hoztuk létre, így:

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

Ez működni fog, azonban, ha belenézünk a konzolba - egy hibát fogunk látni: Warning: Each child in an array or iterator should have a unique "key" prop. Ebben az esetben a React megköveteli, hogy minden ciklusból származó elemnek adjunk egy egyedi számot, hogy a React számára könnyebb legyen ezekkel az elemekkel dolgozni a jövőben.

Ezt a számot a key attribútum segítségével adjuk hozzá. Ebben az esetben a számként vehetjük az elem sorszámát a tömbben. Esetünkben ez a szám a index változóban tárolódik, ami azt jelenti, hogy a javított sor így fog kinézni:

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

Futtassuk - a hiba eltűnik a konzolból:

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

Még egyszer: ez a key attribútum szolgálati jelentőségű a React számára, mélyebben megérted ezt a pontot a következő leckékben. Egyelőre egyszerűen tudja: ha ilyen hibát lát - adjon hozzá egy key attribútumot minden egyes elem számára egyedi értékkel, és a probléma eltűnik.

A key kulcsnak csak ezen cikluson belül kell egyedinek lennie, egy másik ciklusban a key értékek egyezhetnek egy másik ciklusból származó értékekkel.

Módosítsa az előző feladat megoldását a leírtaknak megfelelően.