Curly Braces

Part of the Fundamentals section of Coddy's React journey — lesson 6 of 42.

JSX gets interesting the moment you mix in JavaScript. Curly braces { } open a window from your markup back into JavaScript:

const name = 'Ada';

return <p>Hello, {name}!</p>;

Everything inside the braces is evaluated as JavaScript, and the result lands in the page: here the paragraph renders Hello, Ada!.

Without braces, JSX treats what you type as plain text. <p>Hello, name!</p> literally shows the word name, probably not what you meant.

This is the single most-used piece of JSX: define your data as variables, then drop it into the markup with { }.

Challenge

Beginner

The component defines const name = 'Ada' but the greeting shows the literal word name.

Fix the paragraph so it uses the variable: it should render Hello, Ada!.
Don't change the variable itself.

Try it yourself

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Curly Braces

All lessons in Fundamentals