Rendering List dengan map() — CompileDaily Study

Penjelasan

Untuk menampilkan array data sebagai daftar elemen, React memakai method array bawaan JavaScript map() untuk mentransformasi tiap item jadi elemen JSX. Setiap elemen hasil map() WAJIB diberi prop key unik — dipakai React di baliknya untuk melacak elemen mana yang berubah/ditambah/dihapus secara efisien.

Contoh Konsep

function DaftarBahasa() {
    const bahasa = ['JavaScript', 'TypeScript', 'PHP'];

    return (
        <ul>
            {bahasa.map((item, index) => (
                <li key={index}>{item}</li>
            ))}
        </ul>
    );
}

Praktikum

Buat array produk berisi 3 objek {id, nama}. Tampilkan sebagai daftar <li> lewat map(), memakai item.id sebagai key (bukan index array).

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Pakai ID unik dari data (mis. item.id) sebagai key, JANGAN pakai index array kalau daftarnya bisa berubah urutan/ditambah/dihapus di tengah — index sebagai key bisa membuat React salah mencocokkan elemen lama dengan baru, memicu bug tampilan yang aneh dan sulit dilacak.