javascript - React - difference between double curly brackets vs one curly bracket to enumerate properties

Question

So I created the fiddle: https://jsfiddle.net/4ex7uh8g/

The problem is I don't understand the syntactic differences in the particular line of code of that fiddle. Take a look at 24 line in JavaScript tab. Here it uses such syntax: <div style={{...spanStyle}}> also I tried using such syntax as: <div style={spanStyle}> and it also works fine, and when I inspected the style properties are injected identically, so for me it looks like everything is the same, just the difference in syntax, but I'm not really sure, could I be missing something or misunderstanding when choosing one over another?

I also did read this thread: What do these three dots in React do?

It explains some things about three dots operator, I'm quite familiar with this spread operator, but still in my provided examples I don't see what difference that spread operators does, it doesn't separate attributes and values it works the same as {spanStyle}, so for me {{...spanStyle}} and {spanStyle} act identical?

Would be really grateful if you could point out the difference if there's any and when and why should I use one syntax over another.

question from:https://stackoverflow.com/questions/65851999/react-difference-between-double-curly-brackets-vs-one-curly-bracket-to-enumera

Answer 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!