title: What is the purpose of double curly braces in React's JSX syntax?
body: <p>From the <a href="http://facebook.github.io/react/docs/tutorial.html" rel="noreferrer">react.js tutorial</a> we see this usage of double curly braces:</p>
  
  <pre><code>&lt;span dangerouslySetInnerHTML={{ __html: rawMarkup }} /&gt;
  </code></pre>
  
  <p>And then in <a href="http://facebook.github.io/react/docs/thinking-in-react.html" rel="noreferrer">the second tutorial, "Thinking in react"</a>: </p>
  
  <pre><code> &lt;span style={{ color: 'red' }}&gt;
       {this.props.product.name}
   &lt;/span&gt;;
  </code></pre>
  
  <p>However, the <a href="http://facebook.github.io/react/docs/jsx-in-depth.html" rel="noreferrer">React JSX documentation</a> 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? </p>