UI Jadi "Bunglon": Nampilin Konten Beda-Beda Sesuai Kondisi Pake React!

Udah bisa bikin komponen yang ngerespon aksi pengguna pake event handling? Keren! Sekarang, gimana kalau kita mau nampilin atau nyembunyiin bagian tertentu dari UI kita, atau bahkan nampilin komponen yang beda sama sekali, tergantung kondisi tertentu?

Misalnya:

• Nampilin pesan "Selamat Datang, [Nama Pengguna]!" kalau pengguna udah login, tapi nampilin tombol "Login" kalau belum.
• Nampilin ikon loading pas lagi ngambil data, terus nampilin datanya kalau udah selesai (atau pesan error kalau gagal).
• Nampilin tombol "Edit" cuma kalau pengguna itu admin.

Nah, kemampuan buat ngatur apa yang tampil berdasarkan kondisi inilah yang disebut Conditional Rendering (Render Bersyarat). Di React, ada beberapa cara elegan buat ngelakuin ini langsung di dalem JSX atau logika komponenmu.

Kenapa Perlu Conditional Rendering?

UI yang bagus itu biasanya dinamis. Dia gak selalu nampilin hal yang sama terus-terusan. Conditional rendering ngasih kita kemampuan buat:

• Personalisasi Pengalaman Pengguna: Nampilin konten yang relevan buat pengguna tertentu.
• Mengelola State Aplikasi: Nampilin UI yang beda-beda tergantung state aplikasi saat ini (loading, error, sukses, kosong, dll.).
• Bikin UI Lebih Bersih: Gak numpuk semua elemen sekaligus, tapi cuma nampilin yang perlu aja.

Cara-Cara Conditional Rendering di React

Karena JSX itu sebenernya cuma "gula" buat JavaScript, kita bisa pake konstruksi logika JavaScript biasa buat nentuin apa yang mau di-render.

1. Pake Pernyataan if (Di Luar JSX)

Ini cara yang paling dasar dan mirip kayak di JavaScript biasa. Kamu pake if, else if, atau else buat mutusin elemen atau komponen mana yang mau di-return sama komponenmu.

import React, { useState } from 'react';
 
function PesanLogin({ sudahLogin }) { // Nerima prop 'sudahLogin' (boolean)
  if (sudahLogin) {
    return <p>Selamat datang kembali, Pengguna!</p>;
  } else {
    return <p>Silakan login terlebih dahulu.</p>;
  }
}
 
function TombolAksi({ isAdmin }) {
  if (isAdmin) {
    return <button>Hapus Postingan</button>;
  }
  // Kalau gak admin, gak nampilin tombol apa-apa (return null atau gak return apa-apa)
  return null; 
}
 
function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [isAdminUser, setIsAdminUser] = useState(true);
 
  return (
    <div>
      <PesanLogin sudahLogin={isLoggedIn} />
      <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
        {isLoggedIn ? "Logout" : "Login"}
      </button>
      <hr />
      <TombolAksi isAdmin={isAdminUser} />
    </div>
  );
}
 
export default App;

Di sini, komponen PesanLogin nge-return JSX yang beda tergantung nilai prop sudahLogin. Komponen TombolAksi cuma nge-return tombol kalau isAdmin itu true, kalau enggak dia nge-return null (yang artinya React gak bakal ngerender apa-apa buat komponen itu).

2. Pake Operator Ternary (kondisi ? ekspresiJikaBenar : ekspresiJikaSalah) - Langsung di JSX!

Kalau kondisinya simpel dan cuma ada dua kemungkinan hasil (satu buat true, satu buat false), operator ternary ini jadi cara yang ringkes dan elegan buat nulis conditional rendering langsung di dalem JSX.

• Sintaks: { kondisi ? <JSXJikaBenar /> : <JSXSalah /> }

import React, { useState } from 'react';
 
function StatusPengguna() {
  const [sedangMemuat, setSedangMemuat] = useState(true);
  const [dataPengguna, setDataPengguna] = useState(null);
 
  // Simulasi loading data
  setTimeout(() => {
    setDataPengguna({ nama: "Budi" });
    setSedangMemuat(false);
  }, 2000); // Setelah 2 detik
 
  return (
    <div>
      {sedangMemuat 
        ? <p>Sedang memuat data pengguna...</p> // Kalau sedangMemuat true
        : <p>Selamat datang, {dataPengguna ? dataPengguna.nama : 'Tamu'}!</p> // Kalau sedangMemuat false
      }
    </div>
  );
}
 
function App() {
  const [sukaKucing, setSukaKucing] = useState(true);
  return (
    <div>
      <p>
        Apakah kamu suka kucing? {sukaKucing ? "Tentu saja! 😺" : "Tidak juga 😿"}
      </p>
      <button onClick={() => setSukaKucing(!sukaKucing)}>
        Ganti Preferensi
      </button>
      <hr />
      <StatusPengguna />
    </div>
  );
}
 
export default App;

Operator ternary ini enak banget buat pilihan-pilihan simpel di dalem JSX.

3. Pake Operator Logika && (AND) - "Kalau Benar, Tampilkan Ini"

Kadang, kita cuma mau nampilin sesuatu kalau kondisinya true, dan kalau false, ya gak usah nampilin apa-apa. Buat kasus ini, operator logika && bisa jadi shortcut yang keren.

• Cara Kerja: Di JavaScript, ekspresi kondisi && ekspresiLain itu bakal dievaluasi gini:

  • Kalau kondisi itu false (atau falsy), hasilnya langsung kondisi itu sendiri, dan ekspresiLain gak bakal dievaluasi.
  • Kalau kondisi itu true (atau truthy), hasilnya adalah nilai dari ekspresiLain.

• Di React/JSX: Kalau kondisi itu true, React bakal ngerender <JSXJikaBenar />. Kalau kondisi itu false, React bakal ngabaikan (gak ngerender apa-apa) karena hasil ekspresinya (yang false atau falsy lain kayak 0 atau '') itu gak valid buat dirender sebagai elemen. (Hati-hati kalau kondisi bisa jadi angka 0, karena 0 itu falsy tapi bakal dirender sebagai teks "0" sama React! Untuk kasus itu, mending pake ternary kondisi ? <JSX /> : null).

• Sintaks: { kondisi && <JSXJikaBenar /> }

import React, { useState } from 'react';
 
function Notifikasi({ jumlahPesanBaru }) {
  return (
    <div>
      <h2>Notifikasi</h2>
      {/* Pesan ini cuma muncul kalau jumlahPesanBaru lebih dari 0 */}
      {jumlahPesanBaru > 0 && 
        <p>Anda memiliki {jumlahPesanBaru} pesan baru!</p>
      }
      {jumlahPesanBaru === 0 &&
        <p>Tidak ada pesan baru.</p>
      }
    </div>
  );
}
 
function App() {
  const [jumlahNotif, setJumlahNotif] = useState(3);
  return <Notifikasi jumlahPesanBaru={jumlahNotif} />;
}
 
export default App;

4. Menyimpan Elemen JSX di Variabel (buat Kondisi Lebih Kompleks)

Kalau logika conditional rendering-mu jadi agak rumit dengan banyak if/else if, kadang lebih bersih kalau kamu nentuin dulu elemen JSX mana yang mau dirender di variabel JavaScript biasa, baru variabel itu yang kamu masukin ke return JSX utama.

import React, { useState } from 'react';
 
function KontenDinamis({ status }) { // status bisa "loading", "sukses", "error"
  let elemenKonten; // Variabel buat nyimpen JSX
 
  if (status === "loading") {
    elemenKonten = <p>Sedang mengambil data...</p>;
  } else if (status === "sukses") {
    elemenKonten = <div>
                     <h3>Data Berhasil Diambil!</h3>
                     <ul><li>Item 1</li><li>Item 2</li></ul>
                   </div>;
  } else if (status === "error") {
    elemenKonten = <p style={{color: 'red'}}>Gagal mengambil data!</p>;
  } else {
    elemenKonten = <p>Silakan pilih status.</p>;
  }
 
  return (
    <div className="konten-wrapper">
      {elemenKonten} {/* Render variabel yang isinya JSX */}
    </div>
  );
}
 
function App() {
  const [statusData, setStatusData] = useState("loading");
  // Simulasi ganti status setelah beberapa detik
  setTimeout(() => setStatusData("sukses"), 3000); 
 
  return <KontenDinamis status={statusData} />;
}
 
export default App;

Cara ini bikin bagian return JSX utama jadi lebih simpel dan fokus ke struktur, sementara logikanya ada di atas.

Mencegah Komponen Render dengan Mengembalikan null

Kalau kamu mau sebuah komponen gak ngerender apa-apa sama sekali berdasarkan kondisi tertentu, kamu bisa bikin fungsi komponen itu nge-return null.

function TombolAdmin({ apakahAdmin }) {
  if (!apakahAdmin) {
    return null; // Kalau bukan admin, tombolnya gak usah dirender sama sekali
  }
 
  return <button>Akses Panel Admin</button>;
}
 
// Penggunaan:
// <TombolAdmin apakahAdmin={true} />  // Tombol muncul
// <TombolAdmin apakahAdmin={false} /> // Gak ada apa-apa yang dirender

Conditional rendering ini adalah salah satu "bumbu" utama yang bikin aplikasi React jadi dinamis dan cerdas. Dengan milih cara yang pas (if, operator ternary, &&, atau nyimpen JSX di variabel), kamu bisa ngontrol dengan presisi apa aja yang diliat pengguna berdasarkan state aplikasi atau data yang ada.

Biasain diri buat mikirin "kondisi" apa aja yang mungkin terjadi di UI-mu, dan gimana tampilan harus berubah buat tiap kondisi itu. Ini bakal jadi skill yang kepake banget!