title: React - parent components render child components to different elements/nodes
body: <p>I have an already built site in plain old HTML+SASS and I want to add a little React in to handle the main content of the site. I have a list of internal links in a left col that displays different content in the right column (pretty much like tabs).</p>
  
  <p>Looking at various articles it seems as though I should have a parent component that manages a state (perhaps state.currentTab) to control which main content should be rendered.</p>
  
  <p>My problem is I need the parent component to render the left link and the right content to different elements. I can't seem to figure out how to do this.</p>
  
  <p>I can see from the below that nothing will actually render as both of the ReactDom.render()'s are in the myParent which never gets called. But my problem seem to be that I need to call/render the two left and right cols in there to be able to pass state updates to each one so I can control the content. And I don't think I can do that if they sit at the bottom of the App.js file which is outside the parent component.</p>
  
  <p>I'm sure I've made some mistakes in the below code but hopefully it explains clearly enough what I want to do.</p>
  
  <p>So the the project might look like so:</p>
  
  <p>index.html</p>
  
  <pre><code>body
    .container
      #leftCol &lt;!-- render links to this element --&gt;
      #rightCol &lt;!-- render content to this element --&gt;
  </code></pre>
  
  <p>App.js</p>
  
  <pre><code>class myParent extends React.Component {
      constructor(props) {
        super(props);
  
        this.state = {
          currentTab: 0
         }
       }
       ReactDOM.render(&lt;Conference currentTab="this.state.currentTab" /&gt;,document.getElementById('rightCol'));
       ReactDOM.render(&lt;TabMenu /&gt;,document.getElementById('leftCol'));
  }
  
  class rightCol extends React.Component {
    render(){
      return(
        &lt;div&gt;right col mark etc&lt;/div&gt;
      )
    }
  }
  
  class leftCol extends React.Component {
    render(){
      return(
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="tab1"&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="tab2"&gt;Tab 2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="tab3"&gt;Tab 3&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      )
    }
  }
  </code></pre>