What is the purpose of double curly braces in React's JSX syntax?

Question

From the react.js tutorial we see this usage of double curly braces:

<span dangerouslySetInnerHTML={{ __html: rawMarkup }} />

And then in the second tutorial, "Thinking in react":

 <span style={{ color: 'red' }}>
     {this.props.product.name}
 </span>;

However, the React JSX documentation doesn't describe or mention double curly braces. What is this syntax (double curlies) for? And is there another way to express the same thing in jsx or is this just an omission from the documentation?

Answer 1

It's just an object literal inlined in the prop value. It's the same as

var obj = {__html: rawMarkup};

<span dangerouslySetInnerHTML={obj} />

Answer 2

Curly braces has got 2 usage here:-

1. { .. } evaluates to an expression in JSX.
2. { key: value } implies a javascript object.

Let see a simple example.

<Image source={pic} style={{width: 193}}/>

If you observe pic is surrounded by braces. That's the JSX way of embedding variable. pic can be any Javascript expression/variable/object. You can also do something like { 2+3 } and it will evaluate to { 5 }

Let's dissect style here. {width: 193} is a Javascript object. And to embed this object in JSX you need curly braces, hence, { {width: 193} }

Note: To embed any kind of Javascript expression/variable/object in JSX you need curly braces.

Answer 3

The syntax of {{color: 'red'}} is used in the style tag because according to the React doc, the style attribute accepts a JavaScript object with camelCased properties rather than a CSS string.

<span style={{color: 'red'}}>
    {this.props.product.name}
</span>;

Answer 4

React uses JSX, In JSX for evaluation of any variable, state object , expression etc has to be enclosed in {}.

While giving inline styles in JSX, it has to be specified as an object so it has to be inside curly braces again. {}.

This is the reason there are two pairs of curly braces

Answer 5

My interpretation of the double curly brackets is that the style object only accepts a JavaScript object, so the object has to be inside of single curly brackets.

style={jsObj}

The object for style artifacts is of key:value pairs (dictionary versus an array) and that object is expressed as, for example, {color:'#ffffff'}.

So you've got:

style = { jsObj }

and

jsObj = {color:'#ffffff'}

Just like in algebra, when you substitute, it stands that:

style = { {color:'#ffffff'} }

Answer 6

this means instead of declaring a style variable that is set to an object of the intended style properties you can instead just set the style properties in an object... this is usually a best practice when the styles you want to add are few however for an element that needs more style it is cleaner to declare a style variable

for instance for an element with fewer style properties do this

<span style={{color: 'red'}}>
  {this.props.product.name}
</span>

for HTML element with more style properties do this

const spanStyle = {
   backgroundColor: 'red',
   color: 'grey',
   margin: '-25px'
}

then you call it with jsx syntax

<span style={spanStyle}>
  {this.props.product.name}
</span>

Answer 7

This is just a JSX syntax notation, normal HTML accepts inline styles with strings like style="color:red", but JSX syntax don't accept inline styles in form of string. We have to pass them as Objects dynamically and only way to embed JavaScript objects in JSX is to use {} notation, which gives us syntax like style={{color:'red'}}

Answer 8

Two steps:

jsObj = {color:'#ffffff'} // First set of braces

style = { jsObj } // Second set of braces

Or one step:

style = { {color:'#ffffff'} } // First & second sets of braces together

As Lama said: "Isn't that easy"

Answer 9

Two sets of curly braces is because we want to provide an object there like so:

function App() {
  return <input style={{ border: '3px solid red' }} />
}

root.render(<App />);

Answer 10

I try to tell it in simple words to be understandable for everyone. The below code:

<span dangerouslySetInnerHTML={{__html: rawMarkup}} />

is equal to

<span 
     dangerouslySetInnerHTML={ {__html: rawMarkup} } 
/>

So, simply we should use React expression if we're going to assign a literal object to a property.

For some people who are mainly moving from AngularJs to ReactJs, it is probably a part of confusion with the AngularJs' expression binding operator {{ }}. So, try to look at it differently in ReactJs.