Bab 3: Menampilkan List & Props

Merender daftar data dan memecah UI menjadi komponen yang lebih kecil.

Merender List dengan `.map()`

Di dunia nyata, Anda akan sering bekerja dengan data dalam bentuk array. Untuk menampilkannya di React, kita menggunakan metode `.map()` dari JavaScript untuk mengubah setiap item data menjadi sebuah elemen JSX.

Props & Komponen Reusable

Untuk menjaga kode tetap rapi, kita bisa membuat komponen terpisah untuk setiap item dalam list (misalnya, sebuah `UserCard`). Kemudian, kita mengirim data untuk setiap pengguna ke komponen tersebut melalui props.

Contoh: Menampilkan Daftar Pengguna

Di bawah ini adalah contoh lengkap bagaimana kita mendefinisikan data, membuat komponen `UserCard`, dan menampilkannya menggunakan `.map()`.

Contoh Kode:

// 1. Data kita (sebuah array of objects)
const users = [
  { id: 1, name: 'Citra Kirana', ... },
  { id: 2, name: 'Doni Setiawan', ... },
  { id: 3, name: 'Eka Lestari', ... },
];

// 2. Komponen untuk satu kartu pengguna
// Menerima 'user' sebagai prop
function UserCard({ user }) {
  return (
    <div className="user-card">
      <img src={user.avatar} alt={user.name} />
      <h3>{user.name}</h3>
      <p>{user.job}</p>
    </div>
  );
}

// 3. Tampilkan list di komponen utama
function UserList() {
  return (
    <div>
      {users.map(user => (
        <UserCard key={user.id} user={user} />
      ))}
    </div>
  );
}

Hasil Tampilan:

Citra Kirana

Frontend Developer

Doni Setiawan

Backend Developer

Eka Lestari

UI/UX Designer

Aturan Penting: `key` Prop

Saat merender sebuah list, React perlu cara untuk mengidentifikasi setiap item secara unik. Untuk itu, kita wajib memberikan sebuah prop spesial bernama key pada elemen terluar di dalam loop `.map()`.

Nilai `key` harus berupa string atau angka yang unik di antara (saudara)-nya. Biasanya, kita menggunakan ID dari data, seperti <UserCard key={user.id} />. Ini sangat penting untuk performa dan menghindari bug yang tidak terduga.