Není co ukázat

Pořadatelé uvažují o třetím dni, neděli, a aplikace pro něj už má Program. (Program.jsx je sekce s nadpisem a kartami kapel, které dostane.) V neděli zatím nikdo nehraje, takže její Program dostane prázdné pole a stránka ukáže nadpis Neděle a pod ním nic. Bylo by lepší to napsat.

V lekci JSX jste viděli, že if do složených závorek napsat nejde: patří do nich jen výrazy, které dávají hodnotu, a if je příkaz. Jenže komponenta je funkce a před jejím return smíte psát jakýkoli JavaScript, i if. A funkce může mít víc než jeden return:

function Oblibene({ kapely }) {
    if (kapely.length === 0) {
        return <p>Zatím nemáte žádné oblíbené kapely.</p>;
    }

    return (
        <ul>
            {kapely.map((kapela) => (
                <li key={kapela.id}>{kapela.nazev}</li>
            ))}
        </ul>
    );
}

Když je pole prázdné, funkce vrátí odstavec a skončí: zbytek se už neprovede. Říká se tomu předčasný návrat (anglicky early return). Jinak funkce pokračuje k druhému return jako dřív. Zvláštní případ vyřídíte hned nahoře a zbytek komponenty už na něj nemusí myslet.

Někdy komponenta nemá co ukázat vůbec. Pak vrátí null a React na její místo nedá nic:

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

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

<Oznameni text="" /> neukáže nic, ani prázdný p. Takové prvky byste mohli vynechat i v rodiči, pomocí filter() nebo podmínky. Když ale nejlíp ví komponenta sama, jestli má co ukázat, drží return null to rozhodnutí na jednom místě.