Reactда id орқали уникал калитлар

Юқорида келтирилган кодда key атрибутига биз массивдаги элементнинг тартиб рақамини қўшган эдик. Аслида, бундай амалиёт ёмон ҳисобланади ва фақат eng oxirgi holatda фойдаланиш керак.

Гапи шундаки, массивни saralash пайтида элементларнинг калитлари ўзгариб қолади ва React массив элементлари ва мос теглар ўртасидаги боглиқликни тўғри кузата олмайди.

Яхшироқ амалиёт ҳар бир mahsulotга уникал идентификатор қўшиш бўлиб, шу калит сифатида ишлатилади.

Келинг, бизнинг массивимизда ҳар бир mahsulotга id хусусиятини бизнинг mahsulot рақами билан қўшайлик:

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

Энди калит сифатида шу id дан фойдаланамиз:

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

Олдинги vazifani id ни массивга қўшиб ва улардан key атрибутининг қийматлари сифатида фойдаланиб модификация қилинг.