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 : tu veux simplement qu’un élément apparaisse lorsqu’une condition est remplie. L’astuce && permet d’afficher un élément ou rien du tout :

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

Fonctionnement : && renvoie le membre de droite lorsque celui de gauche est vrai, et React l’affiche. Lorsque celui de gauche est faux, rien ne s’affiche. Avec une valeur booléenne à gauche, c’est l’opérateur ternaire auquel on a retiré : null :

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

C’est pourquoi l’exemple vérifie unread > 0. Avec {unread && <span>...</span>} et unread égal à 0, && renvoie 0 et React l’affiche sur la page.

Défi

Facile

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

En utilisant &&, afficher un <span> avec id="badge" et le texte 3 new messages (construis 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>