title: How to model a list in React
body: <p>I want to render this HTML:</p>
  
  <pre><code>&lt;div className="panel panel-default"&gt;
    &lt;div className="panel-body"&gt;
      &lt;dl className="dl-horizontal"&gt;
        &lt;dt&gt;Step 1&lt;/dt&gt;
        &lt;dd&gt;
          &lt;samp&gt;Output 2&lt;/samp&gt;&lt;br&gt;
          &lt;samp&gt;Output 2&lt;/samp&gt;
        &lt;/dd&gt;
        &lt;dt&gt;Step 1&lt;/dt&gt;
        &lt;dd&gt;
          &lt;samp&gt;Output 2&lt;/samp&gt;&lt;br&gt;
          &lt;samp&gt;Output 2&lt;/samp&gt;
        &lt;/dd&gt;
      &lt;/dl&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The trivial way to model this in React would be:</p>
  
  <pre><code>var ResultBoxPanel = React.createClass({
    render: function () {
      return (
        &lt;div className="panel panel-default"&gt;
          &lt;div className="panel-body"&gt;
            &lt;dl className="dl-horizontal"&gt;
              &lt;ResultBoxStep name="Step 1" /&gt;
              &lt;ResultBoxStep name="Step 2" /&gt;
            &lt;/dl&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  });
  
  var ResultBoxStep = React.createClass({
    render: function () {
      return (
        &lt;dt&gt;{this.props.name}&lt;/dt&gt;
        &lt;dd&gt;
          &lt;samp&gt;Output 1&lt;/samp&gt;&lt;br /&gt;
          &lt;samp&gt;Output 2&lt;/samp&gt;
        &lt;/dd&gt;
      );
    }
  });
  </code></pre>
  
  <p>This doesn't work because apparently I <a href="https://github.com/facebook/react/issues/2127" rel="nofollow">cannot return multiple siblings</a> from a <code>render</code> function.</p>
  
  <p>So, how would I go about modeling this?</p>