tampilan yang dinamis conditional rendering dan rendering list di react

📚 Seri Belajar React · Artikel 5 dari 16

Tampilan yang Dinamis:
Conditional Rendering & Rendering List
di React

Belajar cara React memutuskan apa yang ditampilkan — dari if-else sederhana hingga render daftar data secara dinamis. Ini skill wajib untuk bikin UI yang hidup!

#ConditionalRendering #RenderingList #ReactJS #BelajarReact #ZeroToZorro

⏱️

Estimasi Baca

12 Menit

🎯

Level

Pemula

📅

Tahun

2026

Pernah buka aplikasi dan ngeliat tulisan "Selamat datang, Budi!" — tapi pas belum login, tulisannya ganti jadi tombol "Masuk / Daftar"? Atau scroll feed media sosial yang isinya berbeda-beda untuk setiap orang? Itulah kekuatan conditional rendering dan rendering list di React bekerja di balik layar.

Kalau kamu baru mulai belajar React, dua konsep ini adalah salah satu skill paling krusial yang harus dikuasai. Tanpa conditional rendering dan rendering list, komponen React kamu bakal statis dan kaku — seperti brosur kertas yang nggak bisa berubah. Dengan menguasainya, kamu bisa bikin UI yang beneran hidup dan merespons data.

Di artikel ke-5 dari Seri Belajar React: React from Zero to Zorro ini, kita bakal bedah habis dua teknik ini — dari teori sampai praktik langsung. Siap? Let's go! 🚀

Apa Itu Conditional Rendering di React?

Bayangkan kamu adalah pelayan restoran. Kalau tamu memesan menu vegetarian, kamu bawa piring berisi sayuran. Kalau tamu memesan daging, kamu bawa steak. Kamu tidak membawa kedua-duanya sekaligus ke meja tamu. Itulah analogi paling pas untuk conditional rendering.

Dalam React, conditional rendering adalah teknik untuk memutuskan komponen atau elemen JSX mana yang harus dirender berdasarkan kondisi tertentu — biasanya berdasarkan state, props, atau nilai dari data.

💎 Formula Utama

Conditional Rendering = Kontrol Visibilitas Komponen Berdasarkan Kondisi

React merender JSX seperti fungsi JavaScript biasa — artinya kamu bisa pakai if, ternary ? :, atau operator && langsung di dalam JSX-mu.

🔵 Teknik 1 — Menggunakan if-else Biasa

Ini cara paling klasik. Cocok untuk logika yang panjang atau kompleks.

WelcomeMessage.jsx

function WelcomeMessage({ isLoggedIn, userName }) {
  if (isLoggedIn) {
    return <h2>Selamat datang, {userName}! 👋</h2>;
  }
  return <button>Masuk / Daftar</button>;
}

🟣 Teknik 2 — Operator Ternary (? :)

Cocok untuk kondisi sederhana yang bisa ditulis inline di dalam JSX.

StatusBadge.jsx

function StatusBadge({ isOnline }) {
  return (
    <span style={{ color: isOnline ? 'green' : 'gray' }}>
      {isOnline ? '🟢 Online' : '⚫ Offline'}
    </span>
  );
}

🟡 Teknik 3 — Short-Circuit dengan &&

Kalau kamu hanya ingin tampilkan sesuatu kalau kondisinya true, gunakan &&.

Notification.jsx

function Notification({ hasMessage, count }) {
  return (
    <div>
      <h1>Dashboard</h1>
      {hasMessage && <p>🔔 Kamu punya {count} notifikasi baru!</p>}
    </div>
  );
}

⚠️

Perhatian!

Hindari pakai && dengan nilai angka 0! Kalau count = 0, React akan render angka 0 ke layar, bukan "tidak merender apa-apa". Gunakan count > 0 && ... sebagai gantinya.

Mengenal Rendering List di React dengan .map()

Sekarang bayangkan kamu punya daftar belanja 50 item. Masa iya kamu tulis 50 baris JSX satu-satu? Tentu tidak. Di sinilah rendering list masuk — kamu cukup punya array data, lalu React akan merender setiap item secara otomatis.

Teknik utamanya adalah menggunakan method .map() dari JavaScript. Setiap elemen array diubah menjadi elemen JSX. Ini adalah pola paling umum dalam pengembangan aplikasi React nyata.

🔥

Fakta Menarik

Hampir setiap aplikasi web modern menggunakan rendering list. Feed Twitter, daftar produk Tokopedia, playlist Spotify — semuanya dirender menggunakan teknik .map() di balik layar!

Cara Menggunakan .map() untuk Render List

1

Siapkan Data dalam Bentuk Array

Pastikan datamu sudah berbentuk array — bisa array string, angka, atau array of objects.

2

Panggil .map() pada Array

Gunakan array.map(item => <JSX>) untuk mengubah setiap item menjadi elemen HTML/JSX.

3

⚡ WAJIB: Tambahkan Prop key

Setiap elemen hasil .map() HARUS punya prop key yang unik. Ini dibutuhkan React untuk efisiensi update DOM.

4

Embed di Dalam JSX

Letakkan ekspresi .map() di dalam kurung kurawal {} di dalam return JSX komponen kamu.

ProductList.jsx

// Data produk
const products = [
  { id: 1, name: 'Laptop Gaming', price: 15000000 },
  { id: 2, name: 'Mouse Wireless', price: 350000 },
  { id: 3, name: 'Keyboard Mechanical', price: 800000 },
];

function ProductList() {
  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>
          <strong>{product.name}</strong> — 
          Rp {product.price.toLocaleString('id-ID')}
        </li>
      ))}
    </ul>
  );
}

💡

Tips: Pilih Key yang Tepat

Gunakan ID unik dari database sebagai key, bukan index array. Menggunakan index sebagai key bisa menyebabkan bug tampilan yang misterius ketika list disortir atau item dihapus!

Kombinasi Dahsyat: Conditional Rendering + Rendering List React

Kekuatan sesungguhnya muncul saat kamu menggabungkan keduanya. Bayangkan sebuah halaman toko online: kalau data produk masih loading → tampilkan spinner. Kalau data kosong → tampilkan pesan "Produk tidak ditemukan". Kalau data ada → render semua produk dengan .map(). Ini skenario yang super realistis!

ShopPage.jsx — Kombinasi Conditional + List Rendering

function ShopPage({ isLoading, products }) {
  // Kondisi 1: Masih loading
  if (isLoading) {
    return <p>⏳ Memuat produk...</p>;
  }

  // Kondisi 2: Data kosong
  if (products.length === 0) {
    return <p>😕 Produk tidak ditemukan.</p>;
  }

  // Kondisi 3: Render semua produk
  return (
    <div>
      <h2>Daftar Produk ({products.length} item)</h2>
      <ul>
        {products.map((item) => (
          <li key={item.id}>{item.name} — Rp {item.price}</li>
        ))}
      </ul>
    </div>
  );
}

⚡

Insight Penting

Pola loading → empty → data ini adalah pola yang dipakai di hampir semua aplikasi React profesional — termasuk yang menggunakan library seperti React Query atau SWR. Kuasai pola ini, dan kamu sudah selangkah lebih maju dari banyak developer pemula!

Perbandingan Teknik Conditional Rendering di React

📊 Analysis Box — Kapan Pakai Teknik yang Mana?

Teknik	Kapan Dipakai	Kelebihan	Kekurangan
if / else	Logika kompleks, banyak kondisi	Mudah dibaca, fleksibel	Tidak bisa dipakai inline di JSX
? : (ternary)	Dua kondisi, inline JSX	Ringkas, inline	Sulit dibaca jika nested
&&	Satu kondisi true, atau hide/show	Sangat ringkas	Bahaya dengan nilai 0
.map()	Render banyak item dari array	Dinamis, DRY, efisien	Wajib pakai prop key

💡

Tips Pro

Kalau kondisimu semakin kompleks, pertimbangkan untuk ekstrak logika ke komponen terpisah atau gunakan early return pattern (return duluan di atas, baru render utama di bawah). Kode jadi jauh lebih bersih dan mudah di-maintain!

🏁 Kesimpulan

Sekarang Kamu Sudah Bisa Bikin UI yang Dinamis! 🎉

Di artikel ini kamu sudah mempelajari dua skill krusial dalam membangun antarmuka React yang dinamis:

• ✦ Conditional Rendering — menampilkan konten berbeda berdasarkan kondisi, menggunakan if/else, ternary ? :, dan operator &&
• ✦ Rendering List — merender array data secara dinamis dengan .map() dan prop key yang unik
• ✦ Pola Kombinasi — menggabungkan conditional rendering dan rendering list di React untuk pola loading → empty → data yang profesional

Dua teknik ini akan terus kamu pakai di setiap project React yang kamu bangun. Selamat — kamu sudah semakin dekat jadi Zorro! 🗡️

💬 Diskusi Yuk!

Dari ketiga teknik conditional rendering yang dibahas (if/else, ternary, &&), mana yang paling sering kamu pakai? Atau ada pertanyaan soal rendering list dan prop key? Tulis di kolom komentar! 👇

Bagikan artikel ini: 🐦 Twitter 📱 WhatsApp

🏷️ Tag Artikel

#BelajarReact #ZeroToZorro #ConditionalRendering #RenderingList #ReactJS #PemulaCoding #FrontendDev

📖

Seri Lengkap

React from Zero to Zorro 🗡️

Artikel ini adalah bagian dari seri 16 artikel belajar React secara sistematis dari nol hingga mahir. Lihat semua artikel dan navigasi serinya di sini:

🗡️ Lihat Semua Artikel Seri →

🧭 Navigasi Artikel

← Artikel Sebelumnya

Ngobrol Antar Komponen: Lifting State Up dan Komunikasi Parent-Child

Artikel 4 · Seri React

Artikel Selanjutnya →

React Punya Siklus Hidup! Memahami useEffect Hook dengan Praktikum Langsung

Artikel 6 · Seri React