⭐ Belajar React #4 — Conditional Rendering & List Rendering

Pada artikel sebelumnya, kita sudah membahas tentang State dan bagaimana ia mengubah tampilan UI secara dinamis. Sekarang saatnya mempelajari dua konsep penting dalam React yang akan sangat sering digunakan di proyek nyata:

Conditional Rendering dan List Rendering.

Keduanya sangat erat kaitannya dengan bagaimana React menampilkan UI secara dinamis bergantung pada data atau kondisi tertentu.

---

🎯 Apa yang Akan Kita Pelajari?

1. Apa itu Conditional Rendering

2. Cara membuat kondisi dengan if, &&, dan ternary ?:

3. Apa itu List Rendering

4. Menggunakan .map() untuk merender daftar

5. Menangani key agar tidak muncul error

6. Contoh praktik: To-Do list sederhana

---

🟦 1. Apa Itu Conditional Rendering?

Conditional Rendering adalah teknik untuk menampilkan komponen/tampilan berdasarkan kondisi tertentu.

Analogi sederhana:

• Jika user sudah login → tampilkan Dashboard

• Jika belum login → tampilkan tombol Login

React tidak memiliki sintaks khusus untuk ini, cukup menggunakan ekspresi JavaScript biasa.

---

🔹 Metode Conditional Rendering

1. IF Statement

Biasanya digunakan untuk logika yang panjang.

function Greeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h1>Selamat datang kembali!</h1>;
  }
  return <h1>Silakan login</h1>;
}

---

2. Operator AND ( && )

Digunakan untuk kondisi sederhana.

{isLoading && <p>Loading...</p>}

Jika isLoading = true → teks muncul.
Jika false → tidak muncul apa-apa.

---

3. Ternary Operator condition ? a : b

Paling sering dipakai, rapi, dan singkat.

{isLoggedIn ? <Dashboard /> : <LoginPage />}

---

🟦 2. Apa Itu List Rendering?

List Rendering adalah proses menampilkan banyak elemen berdasarkan sebuah array.
Caranya adalah menggunakan fungsi bawaan JavaScript:

.map()

const fruits = ["Apple", "Banana", "Orange"];

function FruitList() {
  return (
    <ul>
      {fruits.map((fruit) => (
        <li>{fruit}</li>
      ))}
    </ul>
  );
}

---

🔸 Penting! Setiap elemen list harus punya key

React butuh key untuk:

• Mengidentifikasi elemen yang berubah

• Meningkatkan performa rendering

Contoh yang benar:

{fruits.map((fruit, index) => (
  <li key={index}>{fruit}</li>
))}

Namun hindari penggunaan index sebagai key jika datanya bisa berubah posisi, tambah, hapus, dsb.
Lebih baik gunakan id unik:

const todos = [
  { id: 1, text: "Belajar React" },
  { id: 2, text: "Membaca dokumentasi" },
];

---

🟩 Contoh Praktik: To-Do List Sederhana

import { useState } from "react";
function TodoApp() {
  const [todos, setTodos] = useState([
    { id: 1, text: "Belajar React" },
    { id: 2, text: "Ngopi dulu" },
  ]);
  const [input, setInput] = useState("");
  const addTodo = () => {
    setTodos([...todos, { id: Date.now(), text: input }]);
    setInput("");
  };
  return (
    <div>
      <h2>To-Do List</h2>
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="Tambah tugas..."
      />
      <button onClick={addTodo}>Tambah</button>
      <ul>
        {todos.length === 0 ? (
          <p>Tidak ada tugas</p>
        ) : (
          todos.map((todo) => <li key={todo.id}>{todo.text}</li>)
        )}
      </ul>
    </div>
  );
}
export default TodoApp;

Di contoh ini kita sudah menggunakan:
✔ State
✔ List Rendering
✔ Conditional Rendering
✔ Input handling

---

Pada artikel ini kamu telah mempelajari:

• Cara menampilkan elemen berdasarkan kondisi

• Cara merender list menggunakan .map()

• Pentingnya penggunaan key

• Aplikasi sederhana yang menggabungkan semua konsep

Dengan menguasai dua konsep ini, kamu sudah selangkah lebih dekat untuk membangun aplikasi React yang lebih kompleks. Pada artikel berikutnya kita akan belajar Handling Events & Controlled Components