Unikalūs raktai masyve esančiuose React elementuose

Ankstesniame pavyzdyje mes formavome savo paragrafus cikle, štai taip:

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

Tai veiks, tačiau jei pažiūrėtume į konsolę - pamatytume klaidą: Warning: Each child in an array or iterator should have a unique "key" prop. Šiuo atveju React reikalauja, kad kiekvienam elementui iš ciklo suteiktume unikalų numerį, kad React būtų lengviau su šiais elementais dirbti toliau.

Šis numeris pridedamas naudojant atributą key. Šiuo atveju kaip numerį mes galime paimti elemento numerį masyve. Mūsų atveju šis numeris saugomas kintamajame index ir tai reiškia, kad pataisyta eilutė atrodys štai taip:

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

Paleiskime - klaida iš konsolės išnyks:

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

Dar kartą: šis atributas key turi paslauginę reikšmę React, giliau jūs suprasite šį tašką kitose pamokose. Kol kas tiesiog žinokite: jei matote tokią klaidą - pridėkite atributą key su unikalia kiekvienam elementui reikšme ir problema išnyks.

Raktas key turi būti unikalus tik šio ciklo viduje, kitame cikle key reikšmės gali sutapti su reikšmėmis iš kito ciklo.

Modifikuokite savo ankstesnio uždavinio sprendimą pagal aprašytą.