61

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?

3
  • <h1 style={{color: 'red'}}>Hello world</h1> Jul 29, 2020 at 19:27
  • 2
    Official docs on Embedding Expressions in JSX
    – Ricardo
    Nov 29, 2021 at 20:05
  • How can I setAttribute in react for a tag as "attribute={value}", because tag.setAttribute('attribute','{value}') does <tag attribute="{value}" and I need <tag attribute={value}. Any solution ??? Feb 1, 2022 at 11:58

4 Answers 4

70

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".

3
  • 2
    So why doesn't it just interpret the lack of quotation marks to mean it's not a string, like the rest of JavaScript does? Mar 18, 2020 at 19:35
  • 2
    Because that's how JSX is setup and how its parser works. <h1 style={css}> is not technically JavaScript. It's JSX and its syntax calls for curly braces when you want to use a JS expression in JSX.
    – dsan
    Apr 17, 2020 at 20:56
  • Perfect example. As a quick reminder: first curly bracket i.e "{ css }" means evaluate the css variable / content. When a second curly bracket is present i.e "{ {color: red} }", it means {color: red} is a json (JavaScript object). Feb 27, 2022 at 0:40
27

If you don't use the variable css, the JSX could look like this:

<h1 style={ {color: 'red'} }>Hello world</h1>

I guess you are confused about the double curly braces.

so you know that the curly braces in JSX means process the inner value in JavaScript, so the outer braces is used exactly for this purpose.

But the style property accepts an object. And an object also needs another pair of curly braces to wrap it up. That's the purpose for the inner ones.

5

The outer curly braces tell the JSX parser that the syntax should be interpreted as javascript. The inner braces are used because the style variable accepts an object.

let's break this down:

<h1 style={interpret javascritp {interpret the object} }> hello </h1>
4

You put curly braces when you want to use the value of a variable inside "html" (so inside the render part). It's just a way of telling the app to take the value of the variable and put it there, as opposed to a word.

2
  • What do you mean by "as opposed to a word"? Do you mean as opposed to a string? Mar 18, 2020 at 19:38
  • 1
    @KyleDelaney If you do 56+4, it will render 56+4, but if you enclose it in curly braces as {56+4}, it will render 60. Jun 12, 2021 at 17:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.