Braces in Attributes

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

Curly braces work in attributes too. Swap the quotes for braces and the attribute value comes from JavaScript:

const level = 'warning';

return <p className={level}>Check this!</p>;

Now the paragraph's class is whatever the variable holds: change level to 'error' and the class follows. This is how React apps switch styles based on data.

Note the syntax carefully: className={level}, no quotes around the braces. className="{level}" (with quotes) would set the class to the literal text {level}.

Challenge

Easy

The alert paragraph should get its CSS class from the level variable.

Set the paragraph's className to the value of level using curly braces (its class must end up as warning).
Don't type the word warning in the attribute. Use the variable.

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>