Nothing to Show

The organizers are thinking about a third day, Sunday, and the app already has a Lineup for it. (Lineup.jsx is a section with a heading and the cards of the bands it gets.) Nobody plays on Sunday yet, so its Lineup gets an empty array, and the page shows the heading Sunday with nothing under it. It'd be better to say so.

In the JSX lesson, you saw that if can't go in curly braces: they only take expressions, which give a value, and if is a statement. But a component is a function, and before its return, you can write any JavaScript, if included. And a function can have more than one return:

function Favorites({ bands }) {
    if (bands.length === 0) {
        return <p>You have no favorite bands yet.</p>;
    }

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

When the array is empty, the function returns the paragraph and ends: the rest of it doesn't run. This is called an early return. Otherwise, it goes on to the second return, as before. The special case is dealt with at the top, and the rest of the component doesn't have to think about it.

Sometimes a component has nothing to show at all. Then it returns null, and React puts nothing on the page in its place:

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

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

<Notice text="" /> shows nothing, not even an empty p. You could leave such elements out in the parent instead, with filter() or a condition. But when it's the component itself that knows best whether it has something to show, return null keeps that decision in one place.