React Conditional Rendering: Pola Coding yang Bersih

Halo, Rekan Coder! 👋

Pernah nggak sih kalian ngelihat komponen yang isinya penuh dengan if-else bertumpuk sampai pusing bacanya? Atau mungkin kalian pernah nggak sengaja bikin “monster” dengan ternary operator yang bersarang (nested) berlapis-lapis?

Tenang, saya juga pernah ada di posisi itu.

Hari ini, kita bakal ngobrol santai soal Conditional Rendering. Bahasa gampangnya sih, “Nampilin tampilan yang beda-beda tergantung situasi.”

Yuk, kita bedah 4 pola biar kodingan React kalian makin bersih dan enak dibaca. 🧹

1. Si Klasik if Statement

Kadang, cara lama emang cara terbaik. Kalau kalian mau stop komponen supaya nggak ngerender apa-apa, atau mau handle loading state di awal, if statement adalah teman terbaik.

Pola “Early Return”:

const UserProfile = ({ user, isLoading }) => {
  // Pola: Early Return (Balik Kanan Bubar Jalan)
  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (!user) {
    return <div>Please log in.</div>;
  }

  return (
    <div>
      <h1>Welcome, {user.name}!</h1>
    </div>
  );
};

Ini bersih banget. Kita handle dulu kasus-kasus pinggiran (edge cases), jadi sisa logic di bawahnya tetap simpel dan fokus.

2. Ternary Operator ? :

Ini nih senjata andalan anak React. Paling pas buat pilihan biner: “Kalau A benar tampilkan ini, kalau salah tampilkan itu.”

const LoginButton = ({ isLoggedIn }) => {
  return (
    <button>
      {isLoggedIn ? "Logout" : "Login"}
    </button>
  );
};

Tips Senior: Jangan di-nesting ya! Kalau kalian mulai nulis kondisi ? (anakKondisi ? A : B) : C, tolong berhenti. Kasihanilah diri kalian di masa depan pas mau debugging.

3. Logical AND &&

Pakai ini kalau kalian mau nampilin sesuatu hanya jika kondisinya true, dan nggak nampilin apa-apa kalau false.

const Notification = ({ hasError }) => {
  return (
    <div>
      {hasError && <p className="text-red-500">Something went wrong!</p>}
    </div>
  );
};

⚠️ Awas: Jebakan Angka Nol Hati-hati sama angka! Di JavaScript, 0 itu falsy, tapi React bakal ngerender angka 0 itu ke layar.

// ❌ Kalau count itu 0, yang muncul di layar adalah angka "0"!
{count && <h1>Messages: {count}</h1>}

// ✅ Fix: Ubah jadi boolean
{count > 0 && <h1>Messages: {count}</h1>}

4. Object/Enum Mapping (Jurus Pro) 🧠

Gimana kalau kondisinya banyak? Misalnya mau nampilin warna badge beda-beda buat status “Active”, “Inactive”, “Pending”, sama “Banned”?

Pakai if-else atau switch di dalam JSX itu kotor. Pakai nested ternary itu haram. Solusinya? Pakai object mapping!

const StatusBadge = ({ status }) => {
  // Bikin map-nya
  const statusColors = {
    active: "bg-green-500",
    inactive: "bg-gray-500",
    pending: "bg-yellow-500",
    banned: "bg-red-500",
  };

  // Pilih warnanya, kasih default kalau status nggak dikenal
  const colorClass = statusColors[status] || "bg-gray-500";

  return <span className={`p-2 rounded ${colorClass}`}>{status}</span>;
};

Ini namanya “Declarative”. Gampang dibaca, gampang ditambahin. Tinggal tambah key-value baru aja!

Penutup

Conditional rendering itu nggak perlu ribet.

• Pakai if buat early return.
• Pakai ternary buat A vs B.
• Pakai && buat “Tampil atau Sembunyi”.
• Pakai Object Mapping kalau pilihannya banyak.

Simpel itu indah. Kode yang bersih bikin hidup tenang.

Happy Coding! 🚀