React · pelajaran 3
Daftar dan key
Dari array ke elemen
{tugas.map((t) => <li key={t.id}>{t.teks}</li>)}map mengubah setiap data menjadi satu elemen JSX. Untuk menambah atau menghapus, buat array baru ([...tugas, baru], tugas.filter(…)) lalu panggil setTugas. Jangan ubah array lama dengan push: React membandingkan referensi, jadi ia tidak akan melihat perubahan.
Untuk apa key?
Saat daftar berubah, React mencocokkan baris lama dengan baris baru lewat key. Baris dengan key sama dianggap elemen yang sama: DOM-nya dipakai ulang, beserta isinya yang tidak dipegang React, seperti centang di checkbox.
Starter memakai key={i} (urutan). Coba:
- Tambah dua tugas: “A” lalu “B”.
- Centang B.
- Hapus A.
Sekarang B di urutan 0, dan baris ber-key 0 tadinya milik A yang tidak dicentang. React memakai ulang baris itu, jadi centang B hilang. Buka tab Komponen, centang “tampilkan elemen HTML”, dan lihat key di setiap <li>.
Misi
Gunakan key yang tidak berubah walau urutannya bergeser, yaitu t.id, lalu ulangi percobaan di atas. Tekan Cek misi.
Selanjutnya: Layout web: flexbox dan layar sempit · Semua pelajaran