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>