Нечего показывать

Организаторы думают о третьем дне, воскресенье, и в приложении уже есть Lineup для него. (Lineup.jsx — это секция с заголовком и карточками полученных групп.) В воскресенье пока никто не играет, поэтому его Lineup получает пустой массив, и страница показывает заголовок «Воскресенье», под которым ничего нет. Лучше сказать об этом прямо.

В уроке про JSX вы видели, что if нельзя поставить в фигурные скобки: там допускаются только выражения, которые дают значение, а if — инструкция. Но компонент — это функция, и перед её return можно писать любой JavaScript, в том числе if. А у функции может быть больше одного return:

function Favorites({ bands }) {
    if (bands.length === 0) {
        return <p>У вас пока нет любимых групп.</p>;
    }

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

Когда массив пуст, функция возвращает абзац и завершается: остальной код не выполняется. Это называется ранним возвратом (early return). В остальных случаях выполнение доходит до второго return, как раньше. Особый случай разбирается в самом начале, и остальному компоненту думать о нём не нужно.

Иногда компоненту вообще нечего показывать. Тогда он возвращает null, и React ничего не выводит на его месте:

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

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

<Notice text="" /> не показывает ничего, даже пустого p. Такие элементы можно было бы убирать и в родителе, через filter() или условие. Но когда лучше всех знает, есть ли что показать, сам компонент, return null оставляет это решение в одном месте.