title: How can I render repeating React elements?
body: <p>I've written some code to render repeating elements in ReactJS, but I hate how ugly it is.</p>
  
  <pre><code>render: function(){
    var titles = this.props.titles.map(function(title) {
      return &lt;th&gt;{title}&lt;/th&gt;;
    });
    var rows = this.props.rows.map(function(row) {
      var cells = [];
      for (var i in row) {
        cells.push(&lt;td&gt;{row[i]}&lt;/td&gt;);
      }
      return &lt;tr&gt;{cells}&lt;/tr&gt;;
    });
    return (
      &lt;table className="MyClassName"&gt;
        &lt;thead&gt;
          &lt;tr&gt;{titles}&lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;{rows}&lt;/tbody&gt;
      &lt;/table&gt;
    );
  } 
  </code></pre>
  
  <p>Is there a better way to achieve this?</p>
  
  <p>(I would like to embed <code>for</code> loops within the template code, or some similar approach.)</p>