title: How to render a component using innerHTML in React jsx
body: <p>I'm currently writing functionality that will toggle between two views, graph and list. two is the name of the class of the view's container.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  toggleGraphView() {
      const two = document.getElementsByClassName('two')[0];
      two.innerHTML = '&lt;span&gt;Graph View!&lt;/span&gt;'
    }
  
    toggleListView() {
      const two = document.getElementsByClassName('two')[0];
      two.innerHTML = "&lt;ShotLog shotLog={this.state.shotLog}/&gt;"
    }</code></pre>
  </div>
  </div>
  </p>
  
  <p>The component switches to the graph view text just fine ('Graph View!') but when I try to switch back to list view, I get nothing. After firing toggleListView, in chrome tools the two container contains <code>&lt;shotlog shotlog="{this.state.shotLog}/"&gt;&lt;/shotlog&gt;</code>. I need it to look like <code>&lt;ShotLog shotLog={this.state.shotLog}/&gt;</code> in order to pass props correctly. </p>
  
  <p>I'm not sure where the extra quotations are coming from. Any ideas?</p>