Reactda id orqali noyob kalitlar

Yuqoridagi kodda key atributiga biz elementning massivdagi tartib raqamini qo'shgan edik. Aslida bunday amaliyot yomon hisoblanadi va faqat eng zaruratli hollarda foydalanish kerak.

Masala shundaki, massivni saralashda elementlarning kalitlari o'zgaradi va React massiv elementlari va mos keladigan teglar o'rtasidagi bog'liqlikni to'g'ri kuzata olmaydi.

Yaxshiroq amaliyot har bir mahsulotga noyob identifikator qo'shish bo'ladi, u esa kalit sifatida ishlatiladi.

Keling, bizning massivimizda har bir mahsulotga id xususiyatini mahsulot raqami bilan qo'shamiz:

const prods = [
	{id: 1, name: 'product1', cost: 100},
	{id: 2, name: 'product2', cost: 200},
	{id: 3, name: 'product3', cost: 300},
];

Endi kalit sifatida shu id dan foydalanamiz:

function App() {
	const res = prods.map(function(item) {
		return <p key={item.id}>
			<span>{item.name}</span>:
			<span>{item.cost}</span>
		</p>;
	});
	
	return <div>
		{res}
	</div>;
}

Oldingi vazifani o'zgartiring, massivga id ni qo'shing va ularni key atributi qiymatlari sifatida ishlating.