Zahlen und Wahrheitswerte

Eine Prop in Anführungszeichen ist immer Text. Jeder andere Wert steht in geschweiften Klammern, wie überall in JSX: eine Zahl, ein Wahrheitswert, eine Variable, ein Ausdruck:

<BandKarte name="Nachtzüge" likes={128} hauptact={true} />

Warum ist es wichtig, dass likes eine Zahl ist? Wie in JavaScript verhalten sich Text und Zahlen unterschiedlich. Mit likes="128" bekäme die Karte den Text "128", und {likes + 1} würde 1281 anzeigen, weil + Texte aneinanderhängt. Mit likes={128} zeigt es 129.

Für eine Prop, die true ist, gibt es eine kürzere Schreibweise: nur ihr Name, ohne Wert. Diese beiden Karten bekommen dieselben Props:

<BandKarte name="Nachtzüge" hauptact={true} />
<BandKarte name="Nachtzüge" hauptact />

Eine Prop, die der Parent weglässt, ist in der Komponente undefined, und undefined verhält sich in einer Bedingung wie false. Nur die Karte des Hauptacts braucht also die Prop, die anderen haben sie einfach nicht.

Was kann die Karte mit einem Wahrheitswert anfangen? Eine Komponente ist eine Funktion, deshalb kann sie vor dem return beliebiges JavaScript ausführen: Variablen anlegen, if verwenden, Funktionen aufrufen. Nur das, was sie zurückgibt, erscheint auf der Seite. Sie kann zum Beispiel eine Klasse auswählen:

export default function BandKarte({ name, hauptact }) {
    let className = "karte";
    if (hauptact) {
        className = "karte hauptact";
    }
    return (
        <article className={className}>
            <h3>{name}</h3>
        </article>
    );
}

Wenn du {hauptact} ins JSX schreibst, wird nichts angezeigt: React zeigt für true und false nichts an. (In der Lektion Listen und Bedingungen siehst du kürzere Wege, etwas nur manchmal anzuzeigen.)