ใช้ id เป็นคีย์เฉพาะใน React

ในโค้ดด้านบน ในแอตทริบิวต์ key เราได้เพิ่มหมายเลขลำดับขององค์ประกอบใน อาร์เรย์ ที่จริงแล้ว การปฏิบัติเช่นนี้ถือว่าไม่ดี และควรใช้เฉพาะในกรณีที่จำเป็นจริงๆ เท่านั้น

เหตุผลก็คือเมื่อทำการจัดเรียงอาร์เรย์ใหม่ องค์ประกอบต่างๆ จะมีคีย์ที่เปลี่ยนไป และ React จะไม่ สามารถติดตามความสัมพันธ์ระหว่าง องค์ประกอบของอาร์เรย์และแท็กที่เกี่ยวข้องได้อย่างถูกต้อง

การปฏิบัติที่ดีกว่าคือการเพิ่ม ตัวระบุเฉพาะ (unique identifier) ให้กับแต่ละ สินค้า ซึ่งจะถูกใช้เป็นคีย์

ลองเพิ่มคุณสมบัติ 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