Уникални клучеви преку 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.