title: Dollar symbol ($) in React/ES2015
body: <p>I notice it seems that when rendering &quot;dynamic content&quot; in React I have to use the dollar symbol ($) in the JSX syntax.</p>
  <p>By &quot;dynamic content&quot;, I refer to the fact that a React component doesn't know anything about what it needs to render until &quot;render-time&quot;, something like passing other components as props...</p>
  <pre><code>render(){
     return(&lt;this.props.component /&gt;)
  }
  </code></pre>
  <p>However, I notice that when passing a variable containing the component to render I have to make use of the dollar sign...</p>
  <pre><code>...
  const $content = this.props.component
  return(&lt;$content /&gt;)
  ...
  </code></pre>
  <p>This wouldn't work...</p>
  <pre><code>...
  const content = this.props.component
  return(&lt;content /&gt;)
  ...
  </code></pre>
  <p>Notice I'm not using the dollar sign above</p>
  <h3>Question</h3>
  <p>Can anyone please explain this behavior?</p>
  <p>I have accompanied a code snippet below that illustrates the above-mentioned behavior</p>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const ContentComponent = () =&gt; {
    return ( 
        &lt;div className="content"&gt;
            &lt;h3&gt;Content&lt;/h3&gt;
        &lt;/div&gt;
    )
  }
  
  const data = {
      content: ContentComponent
  }
  
  const TemplateComponent = () =&gt; {
  
    const $content = data.content
    
    return (   
        &lt;div className="template"&gt;
            &lt;h3&gt;Template&lt;/h3&gt;
            &lt;p&gt;This renders the dynamic content perfectly fine using  the dollar symbol ($)&lt;/p&gt;
            &lt;$content /&gt;
        &lt;/div&gt;
    )
  }
  
  const TemplateComponent2 = () =&gt; {
  
    const content = data.content
    
    return (   
        &lt;div className="template"&gt;
            &lt;h3&gt;Template&lt;/h3&gt;
            &lt;p&gt;This fails to renders the dynamic content when NOT using  the dollar symbol ($)&lt;/p&gt;
            &lt;content /&gt;
        &lt;/div&gt;
    )
  }
  
  ReactDOM.render( 
      &lt;div&gt;
          &lt;TemplateComponent /&gt;
          &lt;TemplateComponent2 /&gt;
      &lt;/div&gt;,
      document.getElementById('root')
  );</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
   font-family: Arial;
   letter-spacing: 2px;
  }
  
  h3 {
   padding: 0;
   margin: 0;
  }
  
  .template {
      margin: 50px auto;
      width: 400px;
      background-color: #E57373;
      padding: 20px;
      color: #E0E0E0;
  }
  
  .content {
      margin: 50px auto;
      background-color: #E0E0E0;
      padding: 20px;
      color: #E57373;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;
  
  
  &lt;div id="root"&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>