Przełączanie za pomocą stanu

Część sekcji Podstawy ścieżki React w Coddy. Lekcja 25 z 42.

Stan to nie tylko liczby. Stan typu boolean to standardowy przełącznik służący do pokazywania i ukrywania elementów:

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

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

Dwie sztuczki działające razem:

setIsOpen(!isOpen): ! odwraca wartość logiczną, więc jeden przycisk zarówno otwiera, jak i zamyka
{condition ? jsx : null}: renderowanie null renderuje nic; element nie jest ukryty, on nie istnieje

Wyzwanie

Średni

Stwórz mechanizm ujawniania spoilera.

Dodaj stan logiczny revealed, początkowo false.
Przycisk (id="toggle") przełącza jego wartość po każdym kliknięciu.
Gdy spoiler jest ujawniony, pokaż element <p> z id="secret" i tekstem The cake is real; w przeciwnym razie renderuj null.

Spróbuj swoich sił

<!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>