Rendering ternario

Fa parte della sezione Fondamenti del percorso React di Coddy. Lezione 33 di 42.

Le parentesi graffe JSX non possono contenere un'istruzione if, ma accolgono perfettamente l'operatore ternario, che copre quasi tutti i casi di scelta tra due alternative in una schermata:

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

Prima la condizione, poi il valore per true, quindi il valore per false. Entrambi i lati possono essere elementi JSX completi:

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

Abbinalo allo stato e la pagina cambia in tempo reale: inverti il booleano e React esegue nuovamente il rendering dell’altro ramo.

Sfida

Facile

Crea una riga con lo stato di accesso.

Aggiungi lo stato booleano loggedIn, inizializzato a false.
Il pulsante (id="login") lo inverte a ogni clic.
Il paragrafo (id="status") mostra Welcome back! quando hai effettuato l'accesso e Please log in altrimenti, con un operatore ternario.

Provalo tu

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