Render dengan ternary

Termasuk bagian Dasar-Dasar dalam perjalanan React di Coddy. Pelajaran 33 dari 42.

Kurung kurawal JSX tidak bisa memuat pernyataan if, tetapi bisa memuat operator ternary dengan sempurna, dan operator ini menangani hampir semua pilihan antara dua hal di layar:

{isLoggedIn ? 'Welcome back!' : 'Please log in'}

Kondisi terlebih dahulu, lalu nilai untuk true, kemudian nilai untuk false. Kedua sisi dapat berupa elemen JSX lengkap:

{isLoggedIn
    ? <p>Welcome back!</p>
    : <button>Log in</button>}

Pasangkan dengan state agar halaman berubah secara langsung: ubah nilai boolean, React merender ulang cabang lainnya.

Tantangan

Mudah

Buat baris status login.

Tambahkan state boolean loggedIn, dengan nilai awal false.
Tombol (id="login") membalik nilainya setiap kali diklik.
Paragraf (id="status") menampilkan Welcome back! saat pengguna sudah login dan Please log in jika tidak, dengan ternary.

Coba sendiri

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>