React'те id аркылуу уникалдуу ачкычтар

Жогоруда көрсөтүлгөн коддо 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 атрибутунун маанилери катары колдонуңуз.