score:3

Accepted answer

When using a single pair of braces, you basically tell JSX you're going to embed a JS expression. When you have a second pair within the first, you're creating an inlined object literal(as you're already in JS context). When you specify styles through the style property in JSX you have to supply an object, hence the double braces.

{{...spanStyle}}

Just creates a new object literal and takes all the properties from spanStyle using the spread operator (...) so as you noticed already you will get absolutely the same result as simply doing {spanstyle} but with the overhead of creating an object clone.

score:1

What you are looking for is the spread operator:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

With this syntax you can create a new object, and add some prop overriding any original object prop.

Example:

const spanStyle = {width: '100%', height: '400px'};

<div style={{...spanStyle, height: 'auto'}}>

If you dont need override anything, just skip spread!

score:2

First encasing brackets is for the JSX specification for javascript evaluated portions:

<div style={ Javascripty stuff in here }

So, first brackets starts up javascript mode essentially. Next set of brackets is in javascript land, which in javascript {} means new empty Object

Last piece of the puzzle is the spread operator ....

When you use the spread operator on an object within the declaration of another object, it sucks all the properties out of that object and applies it to the new object you are calling:

<div style={{...anotherObject}} />

So, if you remember the first brackets activates javascript stuff, it all starts making more sense.


Related Query

More Query from same tag