title: Is it possible to replace DOM elements with React?
body: <p>I would like to render a <code>&lt;section&gt;</code> element using React but only if certain conditions are met.</p>
  
  <p>The problem is I can't nest the <code>&lt;section&gt;</code> within a <code>&lt;div&gt;</code> so the highest level DOM element besides <code>&lt;body&gt;</code> is <code>&lt;section&gt;</code></p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;section id="my_element"&gt;&lt;/section&gt;
  </code></pre>
  
  <p>My React:</p>
  
  <pre><code>ReactDOM.render(
    &lt;div className="container"&gt;
      ...
    &lt;/div&gt;,
    document.getElementById('my_element')
  );
  </code></pre>
  
  <p>I know with Angular directives you can replace the original DOM element with your rendered element by using <code>replace: true</code></p>
  
  <pre><code>app.directive('myElement', function(){
    return {
      replace: true,
      ...
      }
    };
  });
  </code></pre>
  
  <p>Is something similar available in React?</p>