Anzeigen mit &&

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

Oft gibt es kein else: Du möchtest einfach nur, dass etwas erscheint, wenn eine Bedingung erfüllt ist. Der &&-Trick sorgt dafür, dass etwas angezeigt wird 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. Bei einem booleschen Wert auf der linken Seite ist es der ternäre Ausdruck, bei dem : null weggelassen wurde:

{cond ? <X /> : null}   // gleichbedeutend mit
{cond && <X />}

Deshalb prüft das Beispiel unread > 0. Bei {unread && <span>...</span>} und einem Wert von 0 für unread gibt && den Wert 0 zurück, und React rendert ihn auf der Seite.

Aufgabe

Einfach

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

Rendere mit && ein <span> mit id="badge" und dem Text 3 new messages (baue die Zahl aus der Variablen zusammen!), 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>