Materi
Data daftar disimpan di larik, lalu diubah menjadi larik elemen JSX dengan map. Larik elemen itu boleh langsung diletakkan di dalam kurung kurawal. Untuk menampilkan sebagian data saja, saring dulu dengan filter, lalu map hasilnya.
const TAGIHAN = [
{ id: "t1", nama: "Listrik", lunas: true },
{ id: "t2", nama: "Air PDAM", lunas: false },
];
export default function BelumLunas() {
const belum = TAGIHAN.filter((t) => !t.lunas);
return <ul>{belum.map((t) => <li key={t.id}>{t.nama}</li>)}</ul>;
}Setiap elemen yang dibuat langsung di dalam map membutuhkan key: teks atau angka yang membedakan item itu dari saudaranya. Dengan key, React mencocokkan item yang sama di antara dua render walaupun urutannya berubah, ada yang disisipkan, atau ada yang dihapus. Tanpa key, React mencetak peringatan Each child in a list should have a unique "key" prop.
Aturan key ada dua: unik di antara saudara dalam satu larik (larik lain boleh memakai key yang sama), dan tidak berubah antarrender. Ambil key dari data, misalnya id dari basis data. Indeks larik hanya aman bila daftar tidak pernah diurutkan ulang, disisipi, atau dihapus sebagian; dokumentasi React menyebutnya sumber bug yang membingungkan. key={Math.random()} lebih buruk lagi: key-nya selalu baru, sehingga semua item dibuat ulang setiap render dan isian di dalamnya hilang.
