Kunci Unik dalam Array Tag di React

Dalam contoh sebelumnya kita membentuk paragraf kita dalam perulangan, seperti ini:

const res = arr.map(function(item) {
	return <p>{item}</p>;
});

Ini akan bekerja, namun, jika kita melihat ke konsol - kita akan melihat error: Warning: Each child in an array or iterator should have a unique "key" prop. Dalam kasus ini React meminta agar setiap tag dari perulangan diberi nomor unik, agar React lebih mudah bekerja dengan tag-tag tersebut nantinya.

Nomor ini ditambahkan menggunakan atribut key. Dalam kasus ini, sebagai nomor kita dapat mengambil nomor elemen dalam array. Dalam kasus kita, nomor ini disimpan dalam variabel index yang berarti baris yang diperbaiki akan terlihat seperti ini:

const res = arr.map(function(item, index) {
	return <p key={index}>{item}</p>;
});

Mari kita jalankan - error dari konsol akan hilang:

function App() {
	const arr = [1, 2, 3, 4, 5];
	
	const res = arr.map(function(item, index) {
		return <p key={index}>{item}</p>;
	});
	
	return <div>
		{res}
	</div>;
}

Sekali lagi: atribut key ini memiliki makna untuk keperluan internal React, Anda akan memahami poin ini lebih dalam di pelajaran berikutnya. Untuk saat ini ketahui saja: jika Anda melihat error seperti itu - tambahkan atribut key dengan nilai unik untuk setiap tag dan masalahnya akan hilang.

Kunci key harus unik hanya di dalam perulangan ini, di perulangan lain nilai key bisa saja bertepatan dengan nilai dari perulangan lain.

Modifikasi solusi Anda dari tugas sebelumnya sesuai dengan yang dijelaskan.