Mostrar con &&

Parte de la sección Fundamentos del Journey de React de Coddy — lección 34 de 42.

A menudo no hay un else: solo quieres que aparezca algo cuando se cumple una condición. El truco del && se encarga de mostrar o nada:

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

Cómo funciona: && devuelve el lado derecho cuando el izquierdo es verdadero, y React lo renderiza. Cuando el izquierdo es falso, no se renderiza nada. Es como el ternario pero habiéndole quitado el : null:

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

Desafío

Fácil

Muestra una insignia en la bandeja de entrada solo cuando haya algo que leer. El componente define unread.

Usando &&, muestra un <span> con id="badge" y el texto 3 new messages (¡construye el número a partir de la variable!), pero solo cuando unread sea mayor que 0.

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>