CODEWITHSUNDEEP
javascriptreactjs
B Robster
B Robster

Reputation: 42043

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

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?

Upvotes: 175

Views: 68640

Answers (11)

de-bits
de-bits

Reputation: 131

From https://reactnative.dev/docs/0.70/intro-react :

Notice the double curly braces {{ }} surrounding style‘s width and height. In JSX, JavaScript values are referenced with {}. This is handy if you are passing something other than a string as props, like an array or number: <Cat food={["fish", "kibble"]} age={2} />. However, JS objects are also denoted with curly braces: {width: 200, height: 200}. Therefore, to pass a JS object in JSX, you must wrap the object in another pair of curly braces: {{width: 200, height: 200}}

Upvotes: 2

Yoni se
Yoni se

Reputation: 1

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"

Upvotes: 0

Daniel
Daniel

Reputation: 15413

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

Upvotes: -1

Bharat
Bharat

Reputation: 421

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

Upvotes: 0

Andrew Lam
Andrew Lam

Reputation: 3804

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

Upvotes: 27

Sumer
Sumer

Reputation: 2867

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

Upvotes: 9

ukuyoma theophilus
ukuyoma theophilus

Reputation: 95

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>

Upvotes: 3

dpresbit
dpresbit

Reputation: 49

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

Upvotes: 4

Mav55
Mav55

Reputation: 4280

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.

Upvotes: 108

Ehsan
Ehsan

Reputation: 1285

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.

Upvotes: -2

Felix Kling
Felix Kling

Reputation: 816422

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

var obj = {__html: rawMarkup};

<span dangerouslySetInnerHTML={obj} />

Upvotes: 168

Related Questions