Afficher avec &&

Fait partie de la section Les fondamentaux du Journey React de Coddy — leçon 34 sur 42.

Souvent, il n'y a pas de else : vous voulez simplement que quelque chose apparaisse lorsqu'une condition est remplie. L'astuce du && gère le cas « afficher ou rien » :

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

Comment cela fonctionne : && renvoie le côté droit lorsque le côté gauche est true, et React l'affiche. Lorsque le côté gauche est false, rien ne s'affiche. C'est la ternaire avec le : null supprimé :

{cond ? <X /> : null}   // identique à
{cond && <X />}

Défi

Facile

Affichez un badge de boîte de réception uniquement lorsqu'il y a quelque chose à lire. Le composant définit unread.

En utilisant &&, affichez un <span> avec id="badge" et le texte 3 new messages (construisez le nombre à partir de la variable !), mais uniquement lorsque unread est supérieur à 0.

Essayez vous-même

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