Frontend Academy · Pelajaran

List, Key, dan Rendering Kondisional

Render array elemen dengan .map(), berikan props key yang stabil, dan render elemen secara kondisional dengan && serta operator ternary.

List, Key, dan Rendering Kondisional adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Merender Daftar dengan .map()

Render daftar dinamis dengan memanggil .map() pada larik dan mengembalikan JSX untuk setiap item. React merender larik elemen seperti halnya satu elemen.

const fruits = ['apple', 'banana', 'cherry'];

return (
  <ul>
    {fruits.map(fruit => (
      <li key={fruit}>{fruit}</li>
    ))}
  </ul>
);

Properti key — Mengapa Penting

key adalah properti React khusus yang membantunya mengidentifikasi item dalam daftar yang berubah, ditambahkan, atau dihapus. Tanpa kunci (atau dengan kunci yang tidak stabil seperti indeks), React dapat menghasilkan pembaruan yang keliru.

Kunci Baik vs Kunci Buruk

Kunci yang baik: ID unik dan stabil dari data Anda (misalnya, item.id). Kunci yang buruk: indeks larik (item dapat diurutkan ulang) atau nilai acak (berubah pada setiap render).

// Bad: index keys — breaks when list reorders
{items.map((item, i) => <Item key={i} {...item} />)}

// Good: stable unique IDs
{items.map(item => <Item key={item.id} {...item} />)}

Merender Objek

Petakan larik objek ke komponen dengan mendestrukturisasi objek menjadi properti.

interface Todo { id: number; text: string; done: boolean; }

const todos: Todo[] = [...];

return (
  <ul>
    {todos.map(({ id, text, done }) => (
      <TodoItem key={id} text={text} done={done} />
    ))}
  </ul>
);

Perenderan Kondisional dengan &&

Gunakan operator hubungan pendek && untuk menyertakan JSX secara kondisional. Jika sisi kiri bernilai salah, tidak ada yang dirender. Waspadai angka yang bernilai salah — 0 dirender sebagai '0'.

function Status({ count }: { count: number }) {
  return (
    <div>
      {count > 0 && <Badge count={count} />}
      {/* Safer: */}
      {count > 0 ? <Badge count={count} /> : null}
    </div>
  );
}

Perenderan Kondisional dengan Ternary

Gunakan operator ternary untuk merender salah satu dari dua elemen berdasarkan suatu kondisi.

function AuthButton({ isLoggedIn }: { isLoggedIn: boolean }) {
  return isLoggedIn
    ? <button onClick={logout}>Sign Out</button>
    : <button onClick={login}>Sign In</button>;
}

Perenderan Kondisional dengan Pernyataan if

Untuk kondisi yang kompleks, gunakan pernyataan if sebelum return. Kembalikan nilai lebih awal untuk status pemuatan atau galat.

function UserProfile({ user }: { user: User | null }) {
  if (!user) return <p>Loading...</p>;
  if (user.banned) return <p>Account suspended.</p>;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

Memfilter Sebelum Memetakan

Filter larik sebelum memetakannya agar hanya item yang cocok yang dirender. Cara ini bersih dan mudah dibaca.

const activeUsers = users.filter(u => u.active);

return (
  <ul>
    {activeUsers.map(user => (
      <UserItem key={user.id} {...user} />
    ))}
  </ul>
);

Status Kosong

Selalu tangani kasus larik kosong. Merender daftar kosong secara diam-diam membingungkan — tampilkan pesan status kosong yang membantu sebagai gantinya.

return (
  <div>
    {todos.length === 0
      ? <p className="empty-state">No tasks yet. Add one above!</p>
      : <ul>{todos.map(t => <TodoItem key={t.id} {...t} />)}</ul>
    }
  </div>
);

Merender Portal untuk Daftar

Daftar panjang yang perlu ditampilkan di simpul DOM yang berbeda (seperti menu tarik-turun) dapat menggunakan ReactDOM.createPortal. Namun, sebagian besar perenderan daftar cukup sederhana di dalam pohon.

Daftar Tervirtualisasi untuk Performa

Untuk daftar yang sangat panjang (1.000 item atau lebih), gunakan pustaka virtualisasi seperti react-window atau @tanstack/react-virtual. Pustaka tersebut hanya merender baris yang terlihat sehingga menghindari masalah performa DOM.

Pemeriksaan Singkat

Kapan indeks larik boleh digunakan sebagai key dalam daftar React?

Rangkuman: Daftar dan Perenderan Kondisional

Render daftar dengan .map(). Selalu tambahkan properti kunci yang stabil dan unik. Gunakan && untuk elemen opsional (waspadai nilai 0). Gunakan operator ternary untuk pilihan salah satu. Gunakan pengembalian awal untuk status pemuatan atau kesalahan. Lakukan penyaringan sebelum pemetaan untuk daftar kondisional. Tampilkan pesan status kosong untuk larik kosong. Lakukan virtualisasi pada daftar yang sangat panjang.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “List, Key, dan Rendering Kondisional” gratis?

Ya — teks lengkap “List, Key, dan Rendering Kondisional” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “List, Key, dan Rendering Kondisional”?

Render array elemen dengan .map(), berikan props key yang stabil, dan render elemen secara kondisional dengan && serta operator ternary. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “List, Key, dan Rendering Kondisional” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Frontend Academy