Conditional Rendering

UI yang bergantung pada kondisi

Hampir semua aplikasi menampilkan hal berbeda tergantung keadaan: sudah login atau belum, data kosong atau ada, sedang memuat atau error. Di React kamu memakai JavaScript biasa untuk itu.

1. if dengan return awal

function StatusLogin({ login, nama }) {
  if (login) {
    return <p className="status">Selamat datang, {nama}!</p>;
  }
  return <button>Masuk</button>;
}

2. Operator ternary ? :

Cocok untuk memilih satu dari dua di dalam JSX:

<p>{login ? `Halo ${nama}` : "Silakan masuk"}</p>

3. Operator &&

Tampilkan sesuatu hanya jika kondisi benar:

{pesan.length > 0 && <p>Ada {pesan.length} pesan baru</p>}

> Jebakan: jika sisi kiri adalah angka 0, React menampilkan 0 di layar! Gunakan perbandingan eksplisit: jumlah > 0 && ... (bukan jumlah && ...).

4. Mengembalikan null

Komponen yang tidak ingin menampilkan apa-apa mengembalikan null:

function Notifikasi({ jumlah }) {
  if (jumlah === 0) return null;
  return <span className="badge">{jumlah}</span>;
}

5. Menyimpan JSX di variable

let isi;
if (loading) isi = <p>Memuat...</p>;
else if (error) isi = <p>Gagal</p>;
else isi = <Daftar data={data} />;

return <div>{isi}</div>;

Pola tiga keadaan data

Saat mengambil data dari server ada tiga keadaan yang harus ditangani: loading, error, dan sukses. Jangan lupa keadaan kosong juga.

Menyembunyikan vs tidak merender

• Mengembalikan null / && → elemen tidak ada di DOM (state anaknya hilang).
• Menyembunyikan dengan CSS (display: none) → elemen tetap ada.