Exibir com &&

Parte da seção Fundamentos do Journey de React da Coddy. Lição 34 de 42.

Muitas vezes, não há else: você só quer que algo apareça quando uma condição é verdadeira. O truque de && mostra algo ou não mostra nada:

{unread > 0 && <span>You have {unread} new messages</span>}

Como funciona: && retorna o lado direito quando o lado esquerdo é verdadeiro, e o React o renderiza. Quando o lado esquerdo é falso, nada é renderizado. Com um booleano à esquerda, é a expressão ternária sem o : null:

{cond ? <X /> : null}   // equivale a
{cond && <X />}

É por isso que o exemplo verifica unread > 0. Com {unread && <span>...</span>} e unread igual a 0, && retorna o 0, e o React o renderiza na página.

Desafio

Fácil

Mostre um selo na caixa de entrada somente quando houver algo para ler. O componente define unread.

Usando &&, renderize um <span> com id="badge" e o texto 3 new messages (monte o número a partir da variável!), mas somente quando unread for maior que 0.

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>