/** @jsx React.DOM */

​

var mappable = function(component){

  return function(x, i){

    return component({key: i}, x);

  }

}

​

var map2d = function(m1, m2, xss){

  return xss.map(function(xs, i, arr){

    return m1(xs.map(m2), i, arr);

  });

}

​

var td = mappable(React.DOM.td);

var tr = mappable(React.DOM.tr);

var th = mappable(React.DOM.th);

​

var titles = "foo bar baz".split(" ");

var rows = [

  ['a', 'b', 'c'],

  ['d', 'e', 'f']

];

​

var App = React.createClass({

  render: function(){

    return (

      <table className="table">

        <thead>{titles.map(th)}</thead>

        <tbody>{map2d(tr, td, rows)}</tbody>

      </table>

    );

  }

});

​

React.renderComponent(<App />, document.body);