title: Dynamically add child components in React
body: <p>My goal is to add components dynamically on a page/parent component.</p>
  
  <p>I started with some basic example template like this:</p>
  
  <p>main.js:</p>
  
  <pre><code>var App = require('./App.js');
  var SampleComponent = require('./SampleComponent.js');
  ReactDOM.render(&lt;App/&gt;, document.body);
  ReactDOM.render(&lt;SampleComponent name="SomeName"/&gt;, document.getElementById('myId'));
  </code></pre>
  
  <p>App.js:</p>
  
  <pre><code>var App = React.createClass({
      render: function() {
          return (
              &lt;div&gt;
                  &lt;h1&gt;App main component! &lt;/h1&gt;
                  &lt;div id="myId"&gt;myId div&lt;/div&gt;
              &lt;/div&gt;
  
          );
      }
  
  });
  </code></pre>
  
  <p>SampleComponent.js:</p>
  
  <pre><code>var SampleComponent = React.createClass({
      render: function() {
          return (
              &lt;div&gt;
                  &lt;h1&gt;Sample Component! &lt;/h1&gt;
              &lt;/div&gt;
          );
      }
  });
  </code></pre>
  
  <p>Here <code>SampleComponent</code> is mounted to <code>&lt;div id="myId"&gt;&lt;/div&gt;</code> node, which is pre-written in <code>App.js</code> template. But what if I need to add indefinite number of components to App component? Obviously I cannot have all the required <em>divs</em> sitting there.</p>
  
  <p>After reading some tutorials I still have no understanding of how components are created and added to parent component dynamically. What is a way of doing it?</p>