title: Dynamically nesting React.js components
body: <p>I'd like to create a <strong>flexible/dynamic</strong> JSX form format that can be rendered using React.js. This format has to include nested groups. A group can contain other groups as well as questions.</p>
  
  <pre class="lang-jsx prettyprint-override"><code>var Group = React.createClass({
      render: function(){
          return (
              &lt;fieldset&gt;&lt;/fieldset&gt;
          );
      }
  });
  
  var Text = React.createClass({
      render: function() {
          return (
              &lt;label&gt;
                 &lt;input type="text"/&gt;
             &lt;/label&gt;
          );
       }
  });
  
  React.render(
      &lt;form&gt;
          &lt;Group&gt;
             &lt;Text/&gt;
          &lt;/Group&gt;
          &lt;Text/&gt;
      &lt;/form&gt;,
      document.getElementById('container')
  );
  </code></pre>
  
  <p>I want to produce:</p>
  
  <pre class="lang-jsx prettyprint-override"><code>&lt;form&gt;
      &lt;fieldset&gt;
          &lt;label&gt;
              &lt;input type="text"&gt;
          &lt;/label&gt;
      &lt;/fieldset&gt;
      &lt;label&gt;
          &lt;input type="text"&gt;
      &lt;/label&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>However the <code>&lt;fieldset&gt;</code> element is not populated. The output just contains an empty <code>&lt;fieldset&gt;</code>.</p>
  
  <p>How should I nest react.js components, and still maintain the flexibility of re-using question and group components at root and nested levels?</p>