title: React render component multiple times in container with different props?
body: <p>I am trying to create a reusable "tag" React component, so that users can create tags onclick and see that information displayed in the DOM.</p>
  
  <p>Here's the module:</p>
  
  <pre><code>module.exports = React.createClass({
    render: function() {
      return (
        &lt;div className="language chip" data-lang={this.props.language} data-lang-level={this.props.level}&gt;
          {this.props.language} ({this.props.level})
          &lt;i className="material-icons"&gt;close&lt;/i&gt;
        &lt;/div&gt;
      );
    }
  });
  </code></pre>
  
  <p>And the onclick call: </p>
  
  <pre><code>var addLanguage = $('a#add-language');
  addLanguage.click(function() {
    var languageLearning = $('#language-learning');
    var levelLearning =  $('#language-level');
  
    if (languageLearning != null &amp;&amp; levelLearning != null) {
  
      ReactDOM.render(
        &lt;LanguageChip
          language={languageLearning.val()}
          level={levelLearning.val()}
        /&gt;,
        document.getElementById('language-chips')
      );
  
      languageLearning.select2('val', '');
      levelLearning.select2('val', '');
  
    }
  })
  </code></pre>
  
  <p>I didn't realise that when using React.DOM, "Any existing DOM elements inside are replaced when first called." This means when adding a second chip, the first is removed. I want users to be able to have multiple chips.</p>
  
  <p>How can I do this?</p>