title: Dynamically rendered Tag is always lowercase
body: <p>I am trying to output some svgs and output them from a list, here is my render method:</p>
  
  <pre><code>render() {
  
          const renderTag = () =&gt; {
              const Tag = this.props.id
              return(&lt;Tag /&gt;)
          } 
  
          return (
              &lt;div key={this.props.name} className="social-box"&gt;
                  &lt;a className={this.props.id + "-link"}&gt; 
                      {renderTag()}
                  &lt;/a&gt;
              &lt;/div&gt;
          )
      }
  </code></pre>
  
  <p>However, the DOM node is always lowercase i.e. <code>&lt;facebook&gt;</code> rather than <code>&lt;Facebook&gt;</code> <code>this.props.id</code> is correctly rendered to the console as <code>Facebook</code>. Can anyone tell me why react or the browser incorrectly renders as lowercase, and therefore not the component, and how to fix? </p>