Conditional Rendering React Adalah: 4 Cara Menampilkan UI Berdasarkan Kondisi

Conditional rendering di React adalah teknik menampilkan elemen atau komponen yang berbeda berdasarkan sebuah kondisi. Sama seperti percabangan if di JavaScript biasa, kamu memutuskan “kalau kondisi A benar tampilkan ini, kalau tidak tampilkan itu”. Bedanya, di React kamu harus mencocokkan cara berpikir bercabang itu dengan aturan JSX, dan di situlah banyak pemula tersandung. Panduan ini membedah empat pola conditional rendering paling penting, kapan memakai masing-masing, plus satu jebakan terkenal yang bikin angka 0 tiba-tiba muncul di layar.

Di akhir artikel kamu akan tahu persis kapan memilih if/else, ternary, operator &&, atau return null, bukan sekadar hafal sintaksnya, tapi paham alasannya. Kalau kamu masih baru di React, ada baiknya baca dulu panduan belajar React dari nol supaya fondasi component dan JSX-nya kuat.

Apa Itu Conditional Rendering di React?

Conditional rendering adalah proses memilih JSX mana yang akan dirender berdasarkan nilai sebuah kondisi (biasanya boolean). Karena komponen React hanyalah fungsi JavaScript yang mengembalikan JSX, kamu bisa memakai logika JavaScript apa pun untuk menentukan apa yang dikembalikan. Sebuah halaman profil menampilkan tombol “Login” untuk tamu tapi “Dashboard” untuk pengguna yang sudah masuk. Sebuah daftar menampilkan spinner saat memuat, pesan “belum ada data” saat kosong, dan kartu-kartu saat datanya ada. Semua itu conditional rendering.

Kuncinya: JSX bukan HTML, melainkan ekspresi JavaScript. Karena itu, semua trik conditional yang sudah kamu kenal di JavaScript, ternary, operator logika, early return, bisa dipakai untuk memilih tampilan. Yang perlu kamu pelajari hanyalah pola mana yang cocok untuk situasi apa.

Ada satu batasan penting yang harus dipahami sejak awal: kamu tidak bisa menaruh statement if biasa langsung di dalam kurung kurawal JSX. Di dalam JSX hanya boleh ada ekspresi (sesuatu yang menghasilkan nilai), bukan statement. Inilah alasan pola-pola seperti ternary dan operator logika menjadi begitu penting di React.

Pola 1: if/else di Luar JSX (atau Early Return)

Cara paling lugas dan paling mudah dibaca adalah memakai if/else biasa, tapi di luar JSX, yaitu sebelum return. Kamu menghitung hasilnya lebih dulu, menyimpannya di variabel, lalu menyisipkannya ke JSX:

function Salam({ sudahLogin }) {
  let pesan
  if (sudahLogin) {
    pesan = <h1>Selamat datang kembali!</h1>
  } else {
    pesan = <h1>Silakan login dulu</h1>
  }

  return <div>{pesan}</div>
}

Variasi yang lebih ringkas dan sangat populer adalah early return: kalau satu kondisi terpenuhi, langsung kembalikan JSX-nya dan hentikan fungsi di situ. Sisa kode di bawahnya hanya jalan kalau kondisi awal tidak terpenuhi:

function Profil({ user }) {
  if (!user) {
    return <p>Loading...</p>
  }

  // Baris di bawah ini hanya jalan kalau user sudah ada
  return <h1>Halo, {user.nama}</h1>
}

Pola if/else di luar JSX ini paling cocok saat logikanya bercabang banyak atau JSX tiap cabang cukup panjang. Kalau semuanya kamu paksakan jadi ternary bersarang, kodenya justru jadi susah dibaca.

Pola 2: Ternary untuk Salah Satu dari Dua (Either/Or)

Ketika kamu harus memilih antara dua tampilan langsung di dalam JSX, operator ternary adalah jawabannya. Bentuknya kondisi ? <A/> : <B/>, baca sebagai “kalau kondisi benar tampilkan A, kalau tidak tampilkan B”:

function TombolAuth({ sudahLogin }) {
  return (
    <div>
      {sudahLogin ? <Dashboard /> : <TombolLogin />}
    </div>
  )
}

Ternary sangat pas untuk situasi “ini ATAU itu”, selalu ada sesuatu yang dirender di kedua cabang. Contoh klasik lain: menampilkan pesan “belum ada catatan” ketika daftar kosong, atau daftar item ketika ada isinya.

{notes.length > 0 ? (
  <ul>
    {notes.map((n) => (
      <li key={n.id}>{n.text}</li>
    ))}
  </ul>
) : (
  <p>Belum ada catatan.</p>
)}

Kalau kamu ingin mendalami operator ternary itu sendiri di luar konteks React, baca panduan operator ternary yang membedahnya dari nol. Untuk memahami kondisi yang datang dari state komponen, panduan useState adalah melengkapi materi ini.

Pola 3: Operator && untuk “Render atau Tidak Sama Sekali”

Kalau kamu hanya ingin menampilkan sesuatu saat kondisi benar dan tidak menampilkan apa-apa saat salah, operator logika && lebih ringkas daripada ternary. Bentuknya kondisi && <Elemen/>:

function Notifikasi({ jumlah }) {
  return (
    <div>
      {jumlah > 0 && <span className="badge">{jumlah} pesan baru</span>}
    </div>
  )
}

Cara kerjanya memanfaatkan sifat operator && di JavaScript: kalau bagian kiri bernilai true, hasilnya adalah bagian kanan (JSX-nya, sehingga dirender). Kalau bagian kiri false, hasilnya false, dan React memang tidak merender false, null, atau undefined, jadi tidak ada apa pun yang muncul. Persis yang kita mau.

Tapi ada jebakan terkenal di sini. Operator && mengembalikan nilai bagian kiri kalau nilai itu falsy, dan angka 0 itu falsy. Jadi kalau bagian kirinya kebetulan bernilai 0, React justru merender angka 0 itu ke layar:

// ❌ JEBAKAN: kalau items kosong, ini merender angka 0 di layar!
{items.length && <Daftar items={items} />}

// ✅ AMAN: bandingkan jadi boolean sungguhan dulu
{items.length > 0 && <Daftar items={items} />}

Di contoh pertama, saat items.length bernilai 0, ekspresi 0 && <Daftar/> menghasilkan 0, dan 0 dirender sebagai teks “0”. Dengan menuliskannya items.length > 0, kondisinya menjadi false (boolean asli), dan React tidak merender apa-apa.

Pola 4: Early Return null untuk Menyembunyikan Seluruh Komponen

Kadang kamu ingin sebuah komponen tidak merender apa pun sama sekali dalam kondisi tertentu. Caranya: kembalikan null dari komponen itu. React memperlakukan null sebagai “jangan render apa-apa”:

function Peringatan({ tampil, pesan }) {
  if (!tampil) return null

  return <div className="peringatan">{pesan}</div>
}

Bedanya dengan operator &&: pola return null menyembunyikan seluruh output komponen dari dalam komponen itu sendiri, sementara && menyembunyikan satu potongan JSX di dalam komponen induk. Pakai return null saat komponennya memang tidak punya alasan tampil dalam kondisi tertentu (misalnya modal yang sedang tertutup).

Sekarang setelah kamu mengenal keempat pola, coba rasakan langsung bagaimana kondisi yang berbeda memicu cabang JSX yang berbeda. Di playground di bawah, klik tiap status dan perhatikan dua hal sekaligus: tampilan yang dirender berubah, dan potongan kode yang aktif ikut berganti.

{status === 'login'  ? <TombolLogin />  : <Dashboard />}

Kapan Pakai Mana: if/else vs Ternary vs && vs return null

Empat pola tadi bukan saling menggantikan, masing-masing punya situasi terbaiknya. Tabel berikut merangkum kapan sebaiknya memilih yang mana:

Aturan praktis yang bisa kamu pegang: kalau ada dua kemungkinan tampilan, pakai ternary. Kalau cuma satu tampilan yang muncul-atau-hilang, pakai &&. Kalau logikanya rumit, mundur ke if/else di atas return. Kalau seluruh komponen perlu absen, return null.

Kondisi yang kamu pakai di sini sering datang dari state atau props komponen. Untuk memahami dari mana nilai-nilai kondisi itu berasal, panduan perbedaan props dan state menjelaskan dua sumber data utama di React yang biasanya jadi bahan bakar conditional rendering.

FAQ Seputar Conditional Rendering React

Kenapa saya tidak bisa menaruh if di dalam JSX?

Karena di dalam kurung kurawal JSX hanya boleh ada ekspresi (sesuatu yang menghasilkan nilai), sedangkan if adalah statement (tidak menghasilkan nilai). Solusinya ada tiga: pakai ternary untuk pilihan dua tampilan, pakai operator && untuk tampil-atau-tidak, atau hitung dulu hasilnya dengan if biasa di atas return lalu sisipkan variabelnya.

Kapan sebaiknya pakai ternary dan kapan pakai operator &&?

Pakai ternary saat ada dua kemungkinan tampilan yang keduanya perlu dirender (misalnya Dashboard atau tombol Login). Pakai operator && saat hanya ada satu tampilan yang perlu muncul saat kondisi benar dan tidak muncul apa-apa saat salah (misalnya badge notifikasi). Ternary untuk either/or, && untuk render-or-nothing.

Kenapa angka 0 tiba-tiba muncul di halaman saya?

Hampir pasti kamu menulis sesuatu seperti arr.length && <Komponen/>. Saat array kosong, arr.length bernilai 0 yang falsy, dan operator && mengembalikan 0 itu, yang lalu dirender sebagai teks. Perbaiki dengan mengubahnya jadi boolean asli: arr.length > 0 && <Komponen/>.

Apa bedanya return null dengan operator &&?

Keduanya sama-sama bisa membuat “tidak ada yang tampil”, tapi cakupannya beda. return null dipakai di dalam sebuah komponen untuk membuat seluruh komponen itu tidak merender apa pun. Operator && dipakai di dalam JSX untuk menyembunyikan satu potongan elemen saja, sementara sisa komponen tetap tampil.

Empat pola ini, if/else, ternary, &&, dan return null, adalah alat lengkap untuk menampilkan UI berdasarkan kondisi apa pun di React. Kuncinya bukan menghafal sintaks, tapi memilih pola yang paling jelas untuk situasimu, dan tidak lupa mengubah angka jadi boolean sebelum operator &&. Untuk berlatih langsung menulis conditional rendering dengan feedback instan di browser, lanjutkan ke pelajaran interaktif conditional rendering React, kamu menulis kodenya sendiri dan langsung melihat hasilnya dirender.