CONDITIONAL RENDERING REACT

Conditional rendering di React memungkinkan kita untuk menampilkan elemen UI berdasarkan kondisi tertentu. Ini sangat berguna untuk membuat aplikasi yang dinamis dan responsif terhadap interaksi pengguna.

Ada beberapa cara untuk melakukan conditional rendering di React, seperti menggunakan pernyataan if, operator ternary, atau operator logika &&. Mari kita lihat beberapa contohnya.

Contoh if sederhana

Misalnya, kita ingin menampilkan pesan selamat datang hanya jika pengguna sudah login. Kita bisa menggunakan pernyataan if untuk menentukan apa yang akan ditampilkan:

function App() {
  const isLoggedIn = true; // Ganti dengan kondisi login yang sebenarnya  

  if (isLoggedIn) {
    return <h1>Selamat datang kembali!</h1>;
  } 
  
  return <h1>Silakan masuk untuk melanjutkan.</h1>;
}
export default App;

Contoh ternary operator

Misalnya, kita ingin menampilkan halaman berdasarkan apakah pengguna sudah login atau belum. Kita bisa menggunakan operator ternary untuk menentukan apa yang akan ditampilkan.

function App() {
  const isLoggedIn = true; // Ganti dengan kondisi login yang sebenarnya  

  return (
    <div>
      {isLoggedIn ? (
        <h1>Selamat datang kembali!</h1>
      ) : (
        <h1>Silakan masuk untuk melanjutkan.</h1>
      )}
    </div>
  );
}
export default App;

Penjelasan:

• isLoggedIn adalah variabel yang menentukan apakah pengguna sudah login atau belum.
• Kita menggunakan operator ternary {isLoggedIn ? <h1>...</h1> : <h1>...</h1>} untuk memilih elemen yang akan ditampilkan.
• Jika isLoggedIn bernilai true, maka akan menampilkan “Selamat datang kembali!“. Jika false, akan menampilkan “Silakan masuk untuk melanjutkan.”.

Contoh logika && operator

Misalnya, kita ingin menampilkan pesan khusus hanya jika pengguna sudah login. Kita bisa menggunakan operator && untuk menampilkan elemen berdasarkan kondisi:

function App() {
  const isLoggedIn = true; // Ganti dengan kondisi login yang sebenarnya

  return (
    <div>
      {isLoggedIn && <h1>Selamat datang kembali!</h1>}
      {!isLoggedIn && <h1>Silakan masuk untuk melanjutkan.</h1>}
    </div>
  );
}
export default App;