Latihan 1 dari materi Conditional Rendering di React — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Starter-nya sudah punya komponen App dengan const isLoggedIn = true dan <div> pembungkus. Biarkan keduanya.
Di dalam <div>, tulis ternary yang membaca isLoggedIn.
Cabang true menampilkan <p>Selamat datang!</p>.
Cabang false menampilkan <p>Silakan login.</p>.
Yang dicek:
<p> pertama di halaman berisi persis Selamat datang! (huruf besar-kecil dan tanda serunya ikut dicek)
kodenya memakai isLoggedIn
yang tampil bergantung pada kondisi: kodenya punya ternary ? : (atau &&, atau if ()
teks Silakan login ada di kode sebagai cabang satunya, walau gak tampil karena isLoggedIn bernilai true
Cuma satu <p> yang tampil: yang sesuai nilai isLoggedIn.
Hint
Di dalam kurung kurawal JSX cuma boleh ekspresi, jadi percabangannya ditulis sebagai ternary: kondisi ? A : B.
Kondisinya isLoggedIn. Setelah tanda tanya tulis <p> untuk true, setelah titik dua tulis <p> untuk false.