უნიკალური გასაღებები id-ის მეშვეობით React-ში

ზემოთ მოცემულ კოდში ატრიბუტ key-ში ჩვენ ვამატებდით ელემენტის რიგით ნომერს მასივში. სინამდვილეში, ასეთი პრაქტიკა არის ცუდი და მას მხოლოდ უკანასკნელ შემთხვევაში უნდა მივმართოთ.

საქმე იმაშია, რომ მასივის დალაგებისას ელემენტებს მიიღებენ სხვა გასაღებები და React-ს არ შეეძლება სწორად აკონტროლოს კავშირი მასივის ელემენტებსა და შესაბამის ტეგებს შორის.

უკეთესი პრაქტიკა იქნება თითოეულ პროდუქტს დავუმატოთ უნიკალური იდენტიფიკატორი, რომელიც და გამოყენებულ იქნება გასაღების როლში.

მოდით ჩვენს მასივში თითოეულ პროდუქტს დავუმატოთ თვისება id ჩვენი პროდუქტის ნომრით:

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

მოდიფიცირება გააკეთეთ წინა ამოცანას, დაუმატეთ მასივს id და გამოიყენეთ ისინი როგორც ატრიბუტ key-ის მნიშვნელობები.