[解決済み] 繰り返されるReactの要素をレンダリングするには？

質問

ReactJSで繰り返し要素をレンダリングするコードを書きましたが、あまりに醜くて嫌になります。

render: function(){
  var titles = this.props.titles.map(function(title) {
    return <th>{title}</th>;
  });
  var rows = this.props.rows.map(function(row) {
    var cells = [];
    for (var i in row) {
      cells.push(<td>{row[i]}</td>);
    }
    return <tr>{cells}</tr>;
  });
  return (
    <table className="MyClassName">
      <thead>
        <tr>{titles}</tr>
      </thead>
      <tbody>{rows}</tbody>
    </table>
  );
} 

もっと良い方法はないでしょうか？

(埋め込みたいのは for のループをテンプレートコード内に埋め込むなどしたいのですが...)

どのように解決するのですか？

中括弧の中に式を入れることができます。コンパイルされたJavaScriptで、なぜ for ループはJSXの構文では決して不可能であることに注意してください。JSXは関数呼び出しと加糖された関数引数に相当します。式だけが許されます。

(また を追加することを忘れないでください。 key 属性を追加することを忘れないでください)。

JSX + ES2015 :

render() {
  return (
    <table className="MyClassName">
      <thead>
        <tr>
          {this.props.titles.map(title =>
            <th key={title}>{title}</th>
          )}
        </tr>
      </thead>
      <tbody>
        {this.props.rows.map((row, i) =>
          <tr key={i}>
            {row.map((col, j) =>
              <td key={j}>{col}</td>
            )}
          </tr>
        )}
      </tbody>
    </table>
  );
} 

JavaScript :

render: function() {
  return (
    React.DOM.table({className: "MyClassName"}, 
      React.DOM.thead(null, 
        React.DOM.tr(null, 
          this.props.titles.map(function(title) {
            return React.DOM.th({key: title}, title);
          })
        )
      ), 
      React.DOM.tbody(null, 
        this.props.rows.map(function(row, i) {
          return (
            React.DOM.tr({key: i}, 
              row.map(function(col, j) {
                return React.DOM.td({key: j}, col);
              })
            )
          );
        })
      )
    )
  );
}