Čísla a booleovské hodnoty

Prop v uvozovkách je vždycky text. Každá jiná hodnota patří do složených závorek, jako všude v JSX: číslo, booleovská hodnota, proměnná, výraz:

<KartaKapely nazev="Noční vlaky" lajky={128} hlavniHvezda={true} />

Proč záleží na tom, že lajky jsou číslo? Stejně jako v JavaScriptu se text a čísla chovají jinak. S lajky="128" by karta dostala text "128" a {lajky + 1} by ukázalo 1281, protože + text spojuje. S lajky={128} ukáže 129.

Pro prop s hodnotou true existuje kratší zápis: stačí její název, bez hodnoty. Tyhle dvě karty dostanou stejné props:

<KartaKapely nazev="Noční vlaky" hlavniHvezda={true} />
<KartaKapely nazev="Noční vlaky" hlavniHvezda />

Prop, kterou rodič vynechá, je v komponentě undefined a undefined funguje v podmínce jako false. Prop tedy potřebuje jen karta hlavní hvězdy a ostatní ji prostě nemají.

Co může karta s booleovskou hodnotou dělat? Komponenta je funkce, takže před return může spustit jakýkoli JavaScript: vytvořit proměnné, použít if, volat funkce. Na stránce se objeví jen to, co vrátí. Může třeba vybrat třídu:

export default function KartaKapely({ nazev, hlavniHvezda }) {
    let trida = "karta";
    if (hlavniHvezda) {
        trida = "karta hlavni-hvezda";
    }

    return (
        <article className={trida}>
            <h3>{nazev}</h3>
        </article>
    );
}

Napsat do JSX {hlavniHvezda} by nic neukázalo: za true a false React neukáže nic. (Kratší způsoby, jak něco ukázat jen někdy, přijdou v lekci Seznamy a podmínky.)