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>