Skip to Content
Learn
Advanced JSX
Curly Braces in JSX

The code in the last exercise didn’t behave as one might expect. Instead of adding 2 and 3, it printed out “2 + 3” as a string of text. Why?

This happened because 2 + 3 is located in between <h1> and </h1> tags.

Any code in between the tags of a JSX element will be read as JSX, not as regular JavaScript! JSX doesn’t add numbers - it reads them as text, just like HTML.

You need a way to write code that says, “Even though I am located in between JSX tags, treat me like ordinary JavaScript and not like JSX.”

You can do this by wrapping your code in curly braces.

Instructions

1.

Add a pair of curly braces to the code from last exercise, so that your JSX expression looks like this:

<h1>{2 + 3}</h1>

Everything inside of the curly braces will be treated as regular JavaScript.

Folder Icon

Take this course for free

Already have an account?