React-daky id arkaly unikal açar

Ýokarda görkezilen kodda, key atributyna biz massiwdaky elementleriň tertip belgisini goşduk. Aslynda, şeýle amal erbet hasaplanylýar we diňe iň soňky ýagdaýda ulanylmagy hökmanydyr.

Sebäbi, massiw tertiplenende, elementleriň açarlary üýtgeşik bolar we React massiw elementleri bilen degişli tegleriň arasyndaky baglanyşygy nädogry yzarlaýar.

Has gowy amal, her önüme unikal identifikator goşmak bolar, we ol açaryň ýerine ulanylar.

Geliň, biziň massiwymyzda her önüme özüniň id hossaryny önümiň belgisi bilen goşalyň:

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

Indi açar hökmünde şu id-y ulanalyň:

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

Öňki meseläni üýtgediň, massiwe id goşup we olary key atributynyň bahasy hökmünde ulanyň.