Werte in geschweiften Klammern

Bisher stand in deinem JSX nur fester Text. Aber eine Komponente ist eine Funktion, und vor return darf deshalb beliebiges JavaScript stehen, zum Beispiel Variablen. Um den Wert einer Variablen in JSX anzuzeigen, setzt du sie in geschweifte Klammern:

export default function App() {
    const festival = "Sommerklang";
    const freitagPreis = 45;

    return (
        <main>
            <h1>{festival}</h1>
            <p>Freitag-Ticket: {freitagPreis} €</p>
            <p>Für zwei: {freitagPreis * 2} €</p>
        </main>
    );
}

Die Seite zeigt:

Sommerklang
Freitag-Ticket: 45 €
Für zwei: 90 €

Ohne die Klammern würde <h1>festival</h1> das Wort festival anzeigen. Zwischen den Klammern steht JavaScript, und du kannst dort jeden Ausdruck einsetzen, alles, was einen Wert hat: eine Variable, eine Rechnung wie freitagPreis * 2 oder einen Aufruf wie festival.toUpperCase().

Texte und Zahlen werden so angezeigt, wie sie sind. Ein Array zeigt seine Einträge aneinandergeklebt: {["Freitag", "Samstag"]} zeigt FreitagSamstag, verbinde sie also vorher, {tage.join(" und ")}. true, false, null und undefined zeigen nichts an, was in der Lektion Listen und Bedingungen nützlich wird. Ein Objekt lässt sich gar nicht anzeigen: {band} stoppt die App, und die Konsole meldet Objects are not valid as a React child. Zeige stattdessen seine Eigenschaften an, etwa {band.name}.

In den Klammern steht nur ein Ausdruck. Eine Anweisung wie if oder for hat keinen Wert, deshalb ist {if (offen) { … }} ein Fehler im Code (Expression expected.). Schreibe so etwas über return, wo beliebiges JavaScript stehen darf; in der Lektion Listen und Bedingungen siehst du, wie JSX etwas nur manchmal anzeigen kann.