Renderowanie warunkowe operatorem trójargumentowym

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

Nawiasy klamrowe JSX nie mogą zawierać instrukcji if, ale świetnie sprawdza się w nich operator warunkowy (ternary) i obejmuje niemal każdy przypadek wyboru jednej z dwóch opcji na ekranie:

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

Najpierw warunek, potem wartość dla true, a następnie wartość dla false. Obie strony mogą być pełnymi elementami JSX:

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

Połącz to ze stanem, a strona będzie przełączać się na żywo: zmień wartość logiczną, a React ponownie wyrenderuje drugą gałąź.

Wyzwanie

Łatwy

Zbuduj wiersz statusu logowania.

Dodaj stan logiczny loggedIn, początkowo ustawiony na false.
Przycisk (id="login") zmienia jego wartość przy każdym kliknięciu.
Akapit (id="status") wyświetla Welcome back!, gdy użytkownik jest zalogowany, a w przeciwnym razie Please log in, używając operatora warunkowego.

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>