Anzeigen mit &&

Teil des Abschnitts Grundlagen der React-Journey von Coddy — Lektion 34 von 42.

Oft gibt es kein else: Sie möchten einfach, dass etwas erscheint, wenn eine Bedingung erfüllt ist. Der &&-Trick kümmert sich um "Anzeigen oder Nichts":

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

So funktioniert es: && gibt die rechte Seite zurück, wenn die linke wahr ist, und React rendert sie. Wenn die linke falsch ist, wird nichts gerendert. Es ist der Ternär-Operator mit abgeschnittenem : null:

{cond ? <X /> : null}   // gleich wie
{cond && <X />}

Aufgabe

Einfach

Zeige ein Posteingangs-Badge nur an, wenn es etwas zu lesen gibt. Die Komponente definiert unread.

Rendere unter Verwendung von && ein <span> mit id="badge" und dem Text 3 new messages (baue die Zahl aus der Variable auf!), aber nur wenn unread größer als 0 ist.

Probier es selbst

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