Nichts zu zeigen

Die Veranstalter denken über einen dritten Tag nach, den Sonntag, und die App hat dafür schon ein Programm. (Programm.jsx ist ein section-Element mit einer Überschrift und den Karten der Bands, die es bekommt.) Am Sonntag spielt noch niemand, also bekommt sein Programm ein leeres Array, und die Seite zeigt die Überschrift Sonntag mit nichts darunter. Besser wäre es, das auch zu sagen.

In der JSX-Lektion hast du gesehen, dass if nicht in geschweifte Klammern passt: Dort stehen nur Ausdrücke, die einen Wert ergeben, und if ist eine Anweisung. Eine Komponente ist aber eine Funktion, und vor ihrem return kannst du beliebiges JavaScript schreiben, auch if. Und eine Funktion kann mehr als ein return haben:

function Favoriten({ bands }) {
    if (bands.length === 0) {
        return <p>Du hast noch keine Lieblingsbands.</p>;
    }

    return (
        <ul>
            {bands.map((band) => (
                <li key={band.id}>{band.name}</li>
            ))}
        </ul>
    );
}

Ist das Array leer, gibt die Funktion den Absatz zurück und endet: Der Rest läuft nicht mehr. Das heißt frühes Return (englisch early return). Sonst geht es mit dem zweiten return weiter, wie bisher. Der Sonderfall wird oben erledigt, und der Rest der Komponente muss sich nicht um ihn kümmern.

Manchmal hat eine Komponente gar nichts anzuzeigen. Dann gibt sie null zurück, und React setzt an ihre Stelle nichts auf die Seite:

function Hinweis({ text }) {
    if (text === "") {
        return null;
    }

    return <p className="hinweis">{text}</p>;
}

<Hinweis text="" /> zeigt nichts an, nicht einmal ein leeres p. Solche Elemente könntest du auch in der Eltern-Komponente weglassen, mit filter() oder einer Bedingung. Aber wenn die Komponente selbst am besten weiß, ob sie etwas zu zeigen hat, hält return null diese Entscheidung an einem Ort.