Exibir com &&

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

Muitas vezes não há um else: você apenas quer que algo apareça quando uma condição for verdadeira. O truque do && lida com o mostrar-ou-nada:

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

Como funciona: && retorna o lado direito quando o esquerdo é verdadeiro, e o React o renderiza. Quando o lado esquerdo é falso, nada é renderizado. É o ternário com o : null removido:

{cond ? <X /> : null}   // o mesmo que
{cond && <X />}

Desafio

Fácil

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

Usando &&, renderize um <span> com id="badge" e o texto 3 new messages (construa o número a partir da variável!), mas apenas 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>