Renderizado ternario

Parte de la sección Fundamentos del Journey de React de Coddy. Lección 33 de 42.

Las llaves de JSX no pueden contener una declaración if, pero albergan el operador ternario perfectamente, y este cubre casi cada alternativa de tipo esto/o-aquello en una pantalla:

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

Primero la condición, después el valor para true, después el valor para false. Ambos lados pueden ser elementos JSX completos:

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

Combínalo con el estado y la página cambiará en vivo: cambia el booleano y React volverá a renderizar la otra rama.

Desafío

Fácil

Construye una línea de estado de login.

Añade el estado booleano loggedIn, empezando en false.
El botón (id="login") lo alterna con cada clic.
El párrafo (id="status") muestra Welcome back! cuando haya iniciado sesión y Please log in en caso contrario, con un operador ternario.

Pruébalo tú mismo

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