Rendering List & Key

Menampilkan banyak item

Data nyata biasanya berupa array: daftar produk, pesan, pengguna. Di React, ubah array menjadi array elemen JSX dengan map():

const produk = [
  { id: 1, nama: "Pensil", harga: 2000 },
  { id: 2, nama: "Buku", harga: 8000 },
];

function DaftarProduk() {
  return (
    <ul>
      {produk.map((p) => (
        <li key={p.id}>{p.nama} - Rp{p.harga}</li>
      ))}
    </ul>
  );
}

React mampu merender array elemen langsung di dalam { }.

key: pengenal unik tiap item

Setiap elemen hasil map wajib diberi key yang unik di antara saudaranya. React memakai key untuk mengenali item mana yang ditambah, dihapus, atau berpindah, sehingga hanya mengubah yang perlu.

Aturan key:

• Unik di antara item sejajar (tidak perlu unik global).
• Stabil: jangan berubah antar render.
• Gunakan ID dari data (p.id).
• Hindari index array sebagai key jika urutan bisa berubah, karena bisa menimbulkan bug (state tertukar, input melompat).

{daftar.map((item, index) => <li key={index}>...</li>)}  // hanya aman jika daftar statis

Jika lupa key, konsol menampilkan peringatan "Each child in a list should have a unique key".

key tidak diteruskan sebagai prop. Jika komponen butuh ID, kirim prop terpisah.

Menyaring dan mengurutkan

Lakukan transformasi sebelum map:

{produk
  .filter((p) => p.harga < 5000)
  .sort((a, b) => a.harga - b.harga)
  .map((p) => <li key={p.id}>{p.nama}</li>)}

(sort mengubah array asli; gunakan salinan: [...produk].sort(...).)

Memecah item menjadi komponen

function ItemProduk({ nama, harga }) {
  return <li>{nama} - Rp{harga}</li>;
}

{produk.map((p) => <ItemProduk key={p.id} nama={p.nama} harga={p.harga} />)}

key ditaruh pada elemen terluar yang di-map (komponen ItemProduk, bukan li di dalamnya).

Daftar kosong

Tampilkan pesan bila tidak ada data (lihat bab conditional rendering):

{produk.length === 0 && <p>Belum ada produk.</p>}