Atributy z hodnot

Složené závorky fungují i v atributech. Atribut pak místo textu v uvozovkách dostane hodnotu výrazu:

export default function App() {
    const festival = "Letní zvuky";
    const plakat = "/react.svg";

    return (
        <header>
            <img src={plakat} alt={`Plakát festivalu ${festival}`} />
            <h1>{festival}</h1>
        </header>
    );
}

Obrázek dostane src="/react.svg" a alt="Plakát festivalu Letní zvuky". Tady se hodí šablonový řetězec: atribut bere jeden výraz, a když má jeho hodnota vzniknout z proměnné a kousku textu, napište ji mezi zpětné apostrofy.

Závorky pište bez uvozovek kolem. src="{plakat}" je obyčejný text, takže by obrázek hledal soubor jménem {plakat} a neukázal by se.

Atributy s pevným textem zůstávají v uvozovkách jako v HTML: alt="Logo". Závorky použijte, když hodnota pochází z vašeho kódu.