Reactda massiv teglarida noyob kalitlar

Oldingi misolda biz abzatslarimizni sikl shaklida yaratdik, mana shunday:

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

Bu ishlaydi, ammo, konsolga qarasak - biz xatolikni ko'ramiz: Warning: Each child in an array or iterator should have a unique "key" prop. Bunday holatda React talab qiladiki, sikldagi har bir teg uchun biz noyob raqam beramiz, shunda React uchun keyinchalik bu teglar bilan ishlash osonroq bo'ladi.

Bu raqam key atributi orqali qo'shiladi. Bunday holatda raqam sifatida biz massivdagi elementning indeksini olishimiz mumkin. Bizning holatda bu raqam index o'zgaruvchisida saqlanadi va shuning uchun tuzatilgan qator mana shunday ko'rinadi:

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

Keling ishga tushiramiz - konsoldagi xato yo'qoladi:

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

Yana bir bor: bu key atributi React uchun xizmat ko'rsatuvchi ma'noga ega, siz bu nuqtani keyingi darslarda chuqurroq tushunasiz. Hozircha shunchaki bilings: agar siz bunday xatoni ko'rsangiz - key atributini qo'shing har bir teg uchun noyob qiymat bilan va muammo yo'qoladi.

key kaliti faqat shu siklining ichida noyob bo'lishi kerak, boshqa siklda key qiymatlari boshqa sikldagi qiymatlar bilan ustma-ust tushishi mumkin.

Oldingi vazifangizning yechimini tavsiflanganidek o'zgartiring.