Render Kondisional: &&, Ternary, Early Return

Kita dapat menampilkan elemen UI secara kondisional menggunakan operator ternary (kondisi ? <A/> : <B/>) atau operator &&.

👀 Contoh dulu

function Status({ isOnline }) {
  return <div>{isOnline ? "Online" : "Offline"}</div>;
}

Hasilnya: Menampilkan 'Online' jika isOnline true, sebaliknya 'Offline'.

💡 Untuk kondisi tunggal gunakan: isLogin && <UserMenu />.

📝 Sekarang giliranmu

Terapkan render kondisional menggunakan operator &&. Jika isLoggedIn bernilai true, kembalikan elemen <button>Logout</button>.

Preview