Buď tohle, nebo nic

Některé karty potřebují něco navíc, co ostatní nemají: hlavní hvězdy, tedy kapely, které uzavírají den na hlavním pódiu, dostanou štítek. S podmíněným operátorem by druhou hodnotou bylo null, které React neukazuje:

{kapela.hlavniHvezda ? <span className="stitek">Hlavní hvězda</span> : null}

Jde to i kratší, pomocí &&:

{kapela.hlavniHvezda && <span className="stitek">Hlavní hvězda</span>}

V kurzu JavaScriptu jste pomocí && spojovali podmínky. Umí ale víc: dává jednu ze svých dvou hodnot. Když se levá hodnota počítá jako nepravda, dá && levou hodnotu a na pravou se ani nepodívá. Jinak dá pravou:

console.log(true && "Hlavní hvězda");
console.log(false && "Hlavní hvězda");
console.log(undefined && "Hlavní hvězda");

Hlavní hvězda
false
undefined

Pro hlavní hvězdu je tedy výsledkem štítek. Pro ostatní kapely je to false, nebo undefined, když vlastnost hlavniHvezda vůbec nemají, a false, true, null ani undefined React neukazuje.

Pozor ale na čísla. I 0 se počítá jako nepravda, takže 0 && … dá 0. A čísla React ukazuje:

{kapela.lajky && <p>{kapela.lajky} lajků</p>}

Kapela s 12 lajky ukáže 12 lajků, ale kapela bez lajků osamělou 0. Pomůže podmínka, která dá true, nebo false, nikdy číslo: kapela.lajky > 0 && …. Stejné je to s délkou pole: pište kapely.length > 0 &&, ne kapely.length &&.