Beralih dengan State

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

State bukan hanya angka. State boolean adalah sakelar standar untuk menampilkan dan menyembunyikan sesuatu:

const [isOpen, setIsOpen] = useState(false);

<button onClick={() => setIsOpen(!isOpen)}>Menu</button>
{isOpen ? <p>I am visible!</p> : null}

Dua trik yang bekerja bersama:

setIsOpen(!isOpen): ! membalik nilai boolean, sehingga satu tombol bisa membuka dan menutup
{condition ? jsx : null}: merender null berarti merender tidak ada apa pun; elemennya tidak disembunyikan, elemen itu tidak ada

Tantangan

Sedang

Buat pengungkapan spoiler.

Tambahkan state boolean revealed, yang dimulai dengan false.
Tombol (id="toggle") membalik nilainya setiap kali diklik.
Saat spoiler diungkap, tampilkan <p> dengan id="secret" dan teks The cake is real; jika tidak, render null.

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>