Conditional Rendering — React

Coba buka GoFood. Belum login — tampil tombol "Masuk". Udah login — tampil profil + saldo + alamat. Restoran tutup — tampil status "Closed" abu-abu, tombol…

Conditional rendering artinya komponen menampilkan hal yang berbeda tergantung keadaan: belum login tampil "Silakan login.", sudah login tampil "Selamat datang!". Gak ada syntax khusus, cukup JavaScript biasa: if, ternary, dan &&. Bayangin papan di pintu warung: papannya satu, tapi tulisannya BUKA atau TUTUP tergantung keadaan. Kadang ada juga stiker "PROMO" yang cuma ditempel kalau memang ada promo, selain itu gak ada apa-apa.

🧪 Tebakan cepat: items kosong ([]), dan JSX-nya {items.length && <p>Jumlah: {items.length}</p>}. Apa yang tampil di halaman: kosong, atau sesuatu? Tebak dulu, jawabannya ada di bagian "Awas angka 0 di &&".

Ternary: pilih satu dari dua

Ternary ditulis kondisi ? A : B: kalau kondisinya true hasilnya A, kalau false hasilnya B. Karena ternary adalah ekspresi (menghasilkan nilai), dia boleh ditaruh di dalam { } di JSX.

function App() {
  const isLoggedIn = true;

  return (
    <div>
      {isLoggedIn ? <p>Selamat datang!</p> : <p>Silakan login.</p>}
    </div>
  );
}
isLoggedIn Yang dirender
true <div><p>Selamat datang!</p></div>
false <div><p>Silakan login.</p></div>

Pakai ternary kalau ada dua tampilan dan salah satunya pasti muncul.

&&: tampil, atau gak ada sama sekali

Kadang cuma ada satu tampilan: muncul kalau syaratnya terpenuhi, selain itu gak ada apa-apa. Untuk ini pakai &&:

function App() {
  const items = ["A", "B", "C"];

  return (
    <div>
      {items.length > 0 && <p className="count">Jumlah: {items.length}</p>}
    </div>
  );
}

Ingat dari JavaScript: a && b menghasilkan a kalau a falsy, dan b kalau a truthy.

items items.length > 0 Hasil && Tampil
["A", "B", "C"] true <p> Jumlah: 3
[] false false (kosong)

React gak menggambar apa-apa untuk false, null, undefined, dan true. Jadi waktu syaratnya false, <p>-nya hilang tanpa sisa. Angka di Jumlah: {items.length} juga dibaca dari array, jadi kalau isinya bertambah, angkanya ikut berubah.

Awas angka 0 di &&

Sekarang syaratnya ditulis items.length saja, tanpa > 0, dan items kosong:

{items.length && <p className="count">Jumlah: {items.length}</p>}

items.length bernilai 0. 0 itu falsy, jadi && berhenti di situ dan menghasilkan 0, bukan false. Masalahnya, React menggambar angka sebagai teks, termasuk 0. Hasilnya, halaman menampilkan 0 begitu saja. Itu jawaban tebakannya. Hal yang sama terjadi dengan {0 && <p>Halo</p>}: yang dirender angka 0.

Obatnya, pastikan sisi kiri && selalu true atau false:

if di atas return

if adalah pernyataan (statement), bukan ekspresi, jadi gak bisa ditaruh di dalam { } di JSX. Tempatnya di atas return. Ini pas kalau satu keadaan mengganti seluruh isi komponen:

function Profil({ user }) {
  if (!user) {
    return <p>Silakan login.</p>;
  }

  return <h1>Halo, {user.nama}!</h1>;
}

Kalau user belum ada, function berhenti di return pertama. Ini sering disebut early return. Jadi ada tiga cara conditional rendering: if (di atas return), ternary ? :, dan &&.

🎯 Pilih yang mana?

⚠️ Jebakan yang sering ketemu

TL;DR: Conditional rendering memakai JavaScript biasa. Ternary kondisi ? A : B memilih satu dari dua tampilan. kondisi && A menampilkan A atau gak ada apa-apa, karena React gak menggambar false, null, undefined, atau true. Tapi React menggambar angka, jadi {0 && <p>Halo</p>} dan {items.length && ...} dengan list kosong menampilkan 0: tulis items.length > 0 && .... if gak bisa di dalam JSX, taruh di atas return (early return). Tiga cara: if, ternary, dan &&.

Yang akan kamu pelajari