Kunci Unik melalui id di React

Dalam kode di atas, pada atribut key kita menambahkan nomor urut elemen dalam array. Sebenarnya, praktik seperti ini merupakan praktik yang buruk dan sebaiknya hanya digunakan dalam keadaan terpaksa.

Masalahnya adalah, ketika array diurutkan, elemen-elemen akan memiliki kunci yang berbeda dan React tidak dapat melacak hubungan antara elemen array dan tag yang sesuai dengan benar.

Praktik yang lebih baik adalah menambahkan identifikasi unik untuk setiap produk, yang akan digunakan sebagai kunci.

Mari kita tambahkan properti id dengan nomor produk kita pada setiap produk dalam array kita:

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

Sekarang gunakan id ini sebagai kunci:

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

Modifikasi tugas sebelumnya, tambahkan id ke dalam array dan gunakan sebagai nilai untuk atribut key.