Values in Curly Braces

So far, your JSX has had only fixed text. But a component is a function, so before return, it can have any JavaScript, such as variables. To show a variable's value in JSX, put it in curly braces:

export default function App() {
    const festival = "Summer Sounds";
    const fridayPrice = 45;

    return (
        <main>
            <h1>{festival}</h1>
            <p>Friday ticket: €{fridayPrice}</p>
            <p>For two: €{fridayPrice * 2}</p>
        </main>
    );
}

The page shows:

Summer Sounds
Friday ticket: €45
For two: €90

Without the braces, <h1>festival</h1> would show the word festival. Between the braces is JavaScript, and you can put any expression there, anything that has a value: a variable, a calculation such as fridayPrice * 2, or a call such as festival.toUpperCase().

Texts and numbers show as they are. An array shows its items stuck together: {["Friday", "Saturday"]} shows FridaySaturday, so join them first, {days.join(" and ")}. true, false, null and undefined show nothing, which will come in handy in the Lists and Conditions lesson. An object can't be shown at all: {band} stops the app with Objects are not valid as a React child in the console. Show its properties instead, such as {band.name}.

Braces take only an expression. A statement such as if or for has no value, so {if (open) { … }} is a mistake in the code (Expression expected.). Write such things above return, where any JavaScript can go; the Lists and Conditions lesson shows how JSX can show something only sometimes.