Renderização Ternária

Parte da seção Fundamentos do Journey de React da Coddy — lição 33 de 42.

As chaves do JSX não podem conter uma instrução if, mas suportam o operador ternário perfeitamente, e ele cobre quase qualquer alternativa em uma tela:

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

Condição primeiro, depois o valor para true, depois o valor para false. Ambos os lados podem ser elementos JSX completos:

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

Combine isso com estado e a página muda ao vivo: altere o booleano, o React renderiza novamente o outro ramo.

Desafio

Fácil

Crie uma linha de status de login.

Adicione o estado booleano loggedIn, iniciando como false.
O botão (id="login") altera seu valor a cada clique.
O parágrafo (id="status") mostra Welcome back! quando conectado e Please log in caso contrário, usando um operador ternário.

Experimente você mesmo

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