Belajar ReactJS - Conditional Rendering & Lists

#Pendahuluan

Aplikasi nyata jarang menampilkan hal yang sama terus-menerus. Kadang kalian menampilkan loading spinner, kadang daftar item, kadang pesan kosong. Kadang harus merender puluhan item dari array. Itulah dua skill yang dibahas episode 7: conditional rendering dan rendering lists.

Selain itu kita akan melihat Fragment untuk mengelompokkan elemen tanpa tag tambahan, portal untuk merender ke luar hierarki DOM, dan error boundaries agar satu kesalahan tidak meruntuhkan seluruh aplikasi. Ini adalah bagian penting dari UI dinamis yang terasa profesional.

#Conditional Rendering dengan Ternary dan Logical Operators

#Ternary: Dua Cabang yang Jelas

Ekspresi ternary paling cocok untuk memilih salah satu dari dua tampilan:

Ternary untuk login state

function Status({ masuk }) {
  return (
    <div>
      {masuk ? <p>Selamat datang kembali</p> : <button>Login</button>}
    </div>
  )
}

{masuk ? <p>...</p> : <button>...</button>} merender paragraf jika masuk bernilai true, dan tombol jika false. Ternary bisa disarangkan, tapi lebih baik pecah menjadi komponen kecil jika mulai bertingkat dalam.

#Logical Operators: Menampilkan atau Menyembunyikan

Untuk menampilkan sesuatu hanya jika kondisinya benar (tanpa cabang else), gunakan &&:

Logical AND untuk notice

function Notifikasi({ pesan }) {
  return (
    <div>
      {pesan.length > 0 && <p className="notice">{pesan}</p>}
    </div>
  )
}

{pesan.length > 0 && <p>...{:javascript}</p>} merender elemen hanya jika ekspresi kiri bernilai truthy. Hati-hati dengan angka: {jumlah && <p>...}</p> akan merender 0 jika jumlah adalah nol — gunakan kondisi eksplisit seperti jumlah > 0.

#Rendering Lists dengan Key yang Stabil

#map untuk Merender Daftar

Cara merender array adalah dengan map yang mengembalikan elemen JSX:

Render list dari array

function DaftarProduk({ produkList }) {
  return (
    <ul>
      {produkList.map((produk) => (
        <li key={produk.id}>{produk.nama} - Rp{produk.harga}</li>
      ))}
    </ul>
  )
}

produkList.map((produk) => <li key={produk.id}>...{:javascript}</li>) mengubah tiap item array menjadi elemen list. Perhatikan prop key yang wajib ada untuk tiap item.

#Key yang Stabil dan Unik

key membantu React mengidentifikasi item mana yang berubah, ditambah, atau dihapus. Aturannya:

• Gunakan ID unik dari data, bukan index array, jika data bisa diurutkan atau diubah.
• Key harus stabil antar render untuk item yang sama.
• Jangan pernah memakai nilai random yang berubah tiap render.

Memakai index sebagai key menimbulkan bug saat item disisipkan atau dihapus di tengah daftar — state item bisa tersambung ke item yang salah.

#Fragment, Portal, dan Error Boundaries

#Fragment tanpa Tag Ekstra

Terkadang kalian butuh beberapa elemen sekaligus tanpa membungkusnya dalam div. Fragment menyelesaikannya:

Fragment singkat

function Detail() {
  return (
    <>
      <h2>Judul</h2>
      <p>Paragraf pertama</p>
      <p>Paragraf kedua</p>
    </>
  )
}

<>...</> adalah sintaks singkat React.Fragment. Berguna saat mengisi grid CSS atau tabel yang tidak boleh punya elemen pembungkus tambahan.

#Portal untuk Render ke Luar Hierarki

Portal merender anak ke node DOM yang berbeda dari induknya. Modal, tooltip, dan dropdown paling cocok memakai ini:

Modal memakai portal

import { createPortal } from "react-dom"
 
function Modal({ anak }) {
  return createPortal(
    <div className="overlay">{anak}</div>,
    document.getElementById("modal-root")
  )
}

createPortal(jsx, document.getElementById("modal-root")) merender konten ke elemen modal-root yang terpisah dari #root. Tambahkan <div id="modal-root"></div> di index.html agar elemen tujuan selalu ada.

#Error Boundaries untuk Keamanan Render

Error boundaries menangkap error render di komponen anak agar tidak mengosongkan seluruh aplikasi. Karena belum ada hook untuk ini, mereka harus berupa class component:

Error boundary dasar

class ErrorBoundary extends React.Component {
  state = { error: null }
 
  static getDerivedStateFromError(error) {
    return { error }
  }
 
  render() {
    if (this.state.error) {
      return <p>Terjadi kesalahan: {this.state.error.message}</p>
    }
    return this.props.children
  }
}

static getDerivedStateFromError(error) menyimpan error ke state, lalu render menampilkan fallback UI alih-alih halaman kosong. Bungkus area yang rawan error dengan <ErrorBoundary>...</ErrorBoundary>.

#Best Practice untuk Dynamic UI

Beberapa kebiasaan yang menjaga UI dinamis tetap sehat:

• Pisahkan render menjadi komponen kecil agar kondisi tidak menumpuk.
• Beri state default yang jelas: kosong, loading, sukses, dan error.
• Selalu sediakan fallback untuk daftar kosong, bukan hanya elemen list.
• Kombinasikan conditional rendering dengan komponen loading dan error dari episode 8.

npm run dev

Coba render DaftarProduk dengan produkList=[] — daftar kosong tidak menampilkan apa pun. Tambahkan satu kondisi {produkList.length === 0 && <p>Belum ada produk</p>} untuk pengalaman yang lebih baik.

#Penutup

Episode 7 menyelesaikan fondasi UI dinamis: conditional rendering dengan ternary dan &&, rendering lists dengan key yang stabil, Fragment, portal untuk modal, dan error boundaries agar aplikasi tidak runtuh karena satu kesalahan.

Inti yang harus dibawa pulang:

• Ternary untuk dua cabang; && untuk menampilkan atau menyembunyikan.
• map merender daftar; selalu sertakan key yang stabil dan unik.
• Jangan memakai index array sebagai key saat daftar bisa berubah urutannya.
• Fragment <>...</> mengelompokkan elemen tanpa node DOM tambahan.
• Portal merender ke luar hierarki: modal dan tooltip.
• Error boundaries memastikan satu error tidak mengosongkan seluruh halaman.

Di episode 8 selanjutnya kita akan membahas data fetching & asynchronous UI — mengambil data dengan fetch, axios, dan async/await, mengelola loading dan error state, pola Suspense yang stabil, serta caching dengan React Query atau SWR. Aplikasi kalian mulai berkomunikasi dengan dunia nyata.