Rendu ternaire

Fait partie de la section Les fondamentaux du Journey React de Coddy. Leçon 33 sur 42.

Les accolades JSX ne peuvent pas contenir de déclaration if, mais elles accueillent parfaitement l'opérateur ternaire, et il couvre presque tous les cas d'alternative à l'écran :

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

D'abord la condition, puis la valeur pour true, puis la valeur pour false. Les deux côtés peuvent être des éléments JSX complets :

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

Associez-le à un état (state) et la page bascule en direct : inversez le booléen, React re-rend l'autre branche.

Défi

Facile

Créez une ligne de statut de connexion.

Ajoutez un état booléen loggedIn, initialisé à false.
Le bouton (id="login") le bascule à chaque clic.
Le paragraphe (id="status") affiche Welcome back! lorsqu'il est connecté et Please log in sinon, à l'aide d'une ternaire.

Essayez vous-même

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