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

Question

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

var obj = {__html: rawMarkup};

<span dangerouslySetInnerHTML={obj} />

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.

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>;

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

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>

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'} }