title: React - difference between double curly brackets vs one curly bracket to enumerate properties
body: <p>So I created the fiddle: <a href="https://jsfiddle.net/4ex7uh8g/" rel="nofollow noreferrer">https://jsfiddle.net/4ex7uh8g/</a></p>
  <p>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: <code>&lt;div style={{...spanStyle}}&gt;</code> also I tried using such syntax as: <code>&lt;div style={spanStyle}&gt;</code> 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?</p>
  <p>I also did read this thread: <a href="https://stackoverflow.com/questions/31048953/what-do-these-three-dots-in-react-do">What do these three dots in React do?</a></p>
  <p>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?</p>
  <p>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.</p>