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

Solution 1:

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

var obj = {__html: rawMarkup};

<span dangerouslySetInnerHTML={obj} />

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

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

Solution 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