Бірегей кілттер 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 атрибутының мәндері ретінде пайдаланыңыз.