What do curly braces mean in JSX (React)?

javascript reactjs ecmascript-6 jsx
EverRip picture EverRip · May 11, 2017 · Viewed 22k times · Source

For an example, to set a style in react you could do

var css = {color: red}

and

<h1 style={css}>Hello world</h1>

Why do you need the curly braces around css in the second code snippet?

Answer

Daniel Sandiego picture Daniel Sandiego · May 11, 2017

The curly braces are a special syntax to let the JSX parser know that it needs to interpret the contents in between them as JavaScript instead of a string.

You need them when you want to use a JavaScript expression like a variable or a reference inside JSX. Because if you use the standard double quote syntax like so:

var css = { color: red }

<h1 style="css">Hello world</h1>

JSX doesn't know you meant to use the variable css in the style attribute instead of the string. And by placing the curly braces around the variable css, you are telling the parser "take the contents of the variable css and put them here". (Technically its evaluating the content)

This process is generally referred to as "interpolation".

Related questions

How to do a nested if else statement in ReactJS JSX?

I wanted to know if its possible to do nested if else if in ReactJS JSX? I have tried various different ways and I am unable to get it to work. I am looking for if (x) { loading screen } else { …

Read More
Why shouldn't JSX props use arrow functions or bind?

I'm running lint with my React app, and I receive this error: error JSX props should not use arrow functions react/jsx-no-bind And this is where I'm running the arrow function (inside onClick): {this.state.photos.map(tile => ( <…

Read More
How to add multiple classes to a ReactJS Component?

I am new to ReactJS and JSX and I am having a little problem with the code below. I am trying to add multiple classes to the className attribute on each li: <li key={index} className={activeClass, data.class, "…

Read More