Hodnoty ve složených závorkách

Ve vašem JSX byl zatím jen pevný text. Komponenta je ale funkce, a tak před return může mít jakýkoli JavaScript, třeba proměnné. Hodnotu proměnné v JSX ukážete tak, že ji dáte do složených závorek:

export default function App() {
    const festival = "Letní zvuky";
    const cenaPatek = 990;

    return (
        <main>
            <h1>{festival}</h1>
            <p>Vstupenka na pátek: {cenaPatek} Kč</p>
            <p>Pro dva: {cenaPatek * 2} Kč</p>
        </main>
    );
}

Stránka ukáže:

Letní zvuky
Vstupenka na pátek: 990 Kč
Pro dva: 1980 Kč

Bez závorek by <h1>festival</h1> ukázalo slovo festival. Mezi závorkami je JavaScript a můžete tam dát jakýkoli výraz, tedy cokoli, co má hodnotu: proměnnou, výpočet jako cenaPatek * 2 nebo volání jako festival.toUpperCase().

Texty a čísla se ukážou tak, jak jsou. Pole ukáže své prvky slepené dohromady: {["pátek", "sobota"]} ukáže páteksobota, a tak je nejdřív spojte, {dny.join(" a ")}. true, false, null a undefined neukážou nic, což se bude hodit v lekci Seznamy a podmínky. Objekt ukázat vůbec nejde: {kapela} zastaví aplikaci a konzole hlásí Objects are not valid as a React child. Ukažte místo něj jeho vlastnosti, třeba {kapela.nazev}.

Do závorek patří jen výraz. Příkaz jako if nebo for hodnotu nemá, a tak je {if (otevreno) { … }} chyba v zápisu kódu (Expression expected.). Takové věci pište nad return, kam patří jakýkoli JavaScript; jak JSX může něco ukázat jen někdy, se dozvíte v lekci Seznamy a podmínky.