Belajar React Dasar #7: Conditional Rendering

• Apa Itu Conditional Rendering?
• Menggunakan if/else
• Menggunakan Operator Ternary
• Menggunakan Operator &&
• Conditional Rendering dengan State
• Kesimpulan

Halo teman-teman semuanya, pada artikel sebelumnya kita sudah belajar tentang Event Handling, bagaimana cara menangani interaksi pengguna seperti klik tombol, mengetik di input, dan mengirim form.

Pada artikel kali ini, kita akan membahas tentang Conditional Rendering di React. Dengan teknik ini, kita bisa menampilkan elemen atau komponen secara dinamis berdasarkan kondisi tertentu.

Apa Itu Conditional Rendering?

Conditional Rendering adalah teknik untuk menampilkan UI berdasarkan kondisi yang kita tentukan. Jika kondisi bernilai benar (true), maka elemen akan ditampilkan, sebaliknya jika salah (false) elemen tidak ditampilkan atau menampilkan alternatif lain.

Sama seperti pada JavaScript, di React kita bisa menggunakan:

• Operator ternary (? :)
• Operator logika (&&)
• if/else di dalam fungsi

Menggunakan if/else

Cara pertama adalah menggunakan if/else sebelum return.

function App() {
  const isLoggedIn = true;

  if (isLoggedIn) {
    return <h1>Selamat datang kembali!</h1>;
  } else {
    return <h1>Silakan login terlebih dahulu.</h1>;
  }
}

export default App;

Penjelasan:

• Jika isLoggedIn bernilai true, maka teks Selamat datang kembali! akan muncul.
• Jika false, maka teks Silakan login terlebih dahulu. yang muncul.

Menggunakan Operator Ternary

Cara yang lebih ringkas adalah menggunakan operator ternary.

function App() {
  const isLoggedIn = false;

  return (
    <div>
      {isLoggedIn ? <h1>Dashboard</h1> : <h1>Login Page</h1>}
    </div>
  );
}

export default App;

Penjelasan:

• Jika isLoggedIn bernilai true, maka yang muncul adalah Dashboard.
• Jika false, maka yang muncul adalah Login Page.

Menggunakan Operator &&

Kadang kita hanya ingin menampilkan elemen jika kondisi true, tanpa ada alternatif.

function App() {
  const showMessage = true;

  return (
    <div>
      <h1>Halo, React!</h1>
      {showMessage && <p>Pesan ini hanya muncul jika showMessage = true</p>}
    </div>
  );
}

export default App;

Penjelasan:

• Jika showMessage bernilai true, maka paragraf akan ditampilkan.
• Jika false, tidak ada yang ditampilkan.

Conditional Rendering dengan State

Kita juga bisa menggabungkan conditional rendering dengan state.

import { useState } from "react";

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <div>
      {isLoggedIn ? (
        <h1>Selamat datang kembali!</h1>
      ) : (
        <h1>Silakan login terlebih dahulu.</h1>
      )}

      <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
        {isLoggedIn ? "Logout" : "Login"}
      </button>
    </div>
  );
}

export default App;

Penjelasan:

• State isLoggedIn menyimpan status login.
• Jika true, tampil teks selamat datang dan tombol akan berubah menjadi Logout.
• Jika false, tampil pesan login dan tombol akan berubah menjadi Login.

Kesimpulan

Pada artikel ini, kita sudah belajar tentang Conditional Rendering di React. Kita bisa menggunakan if/else, operator ternary, dan operator && untuk menampilkan elemen sesuai kondisi. Kita juga sudah mencoba menggabungkannya dengan state agar UI lebih dinamis.

Di artikel berikutnya, kita akan membahas tentang List & Keys, yaitu cara menampilkan daftar data di React dengan lebih efisien.

Terima kasih