Attributes from Values

Curly braces work in attributes too. Instead of a text in quotes, the attribute then gets the value of the expression:

export default function App() {
    const festival = "Summer Sounds";
    const poster = "/react.svg";

    return (
        <header>
            <img src={poster} alt={`${festival} poster`} />
            <h1>{festival}</h1>
        </header>
    );
}

The image gets src="/react.svg" and alt="Summer Sounds poster". A template literal comes in handy here: an attribute takes one expression, so to make its value from a variable and some text, write it with backticks.

Write the braces without quotes around them. src="{poster}" is an ordinary text, so the image would look for a file called {poster} and wouldn't show.

Attributes with a fixed text stay in quotes, as in HTML: alt="Logo". Use braces when the value comes from your code.