Dies oder nichts

Manche Karten brauchen etwas Zusätzliches, das die anderen nicht haben: Die Headliner, die Bands, die den Tag auf der Hauptbühne beschließen, bekommen ein Abzeichen. Mit dem Bedingungsoperator wäre der zweite Wert null, wofür React nichts anzeigt:

{band.headliner ? <span className="abzeichen">Headliner</span> : null}

Es geht kürzer, mit &&:

{band.headliner && <span className="abzeichen">Headliner</span>}

Im JavaScript-Kurs hast du && benutzt, um Bedingungen zu verknüpfen. Es kann aber mehr: Es ergibt einen seiner beiden Werte. Gilt der linke als falsch, ergibt && den linken und schaut den rechten gar nicht an. Sonst ergibt es den rechten:

console.log(true && "Headliner");
console.log(false && "Headliner");
console.log(undefined && "Headliner");

Headliner
false
undefined

Bei einem Headliner ist der Ausdruck also das Abzeichen. Bei den anderen Bands ist er false, oder undefined, wenn sie die Eigenschaft headliner gar nicht haben, und für false, true, null und undefined zeigt React nichts an.

Aber Vorsicht bei Zahlen. Auch 0 gilt als falsch, also ergibt 0 && … die 0. Und Zahlen zeigt React an:

{band.likes && <p>{band.likes} Likes</p>}

Eine Band mit 12 Likes zeigt 12 Likes, aber eine Band ohne Likes zeigt eine einsame 0. Die Lösung ist eine Bedingung, die true oder false ergibt, nie eine Zahl: band.likes > 0 && …. Dasselbe gilt für die Länge eines Arrays: Schreibe bands.length > 0 &&, nicht bands.length &&.