We can create dynamic component data from sets of data

React dynamically generated components

/** @jsx React.DOM */
var React = require('react');

var PersonTable = React.createClass({
  getInitialState: function(){
    return {
      data: [
        {id: 1, fname: 'John', lname: 'Murray'},
        {id: 2, fname: 'Wyatt', lname: 'Murray'},
        {id: 3, fname: 'McKenzie', lname: 'Murray'}
      ],
    };
  },

  render: function(){
    // the only thing I don't understand about all this is how 'person' gets first and last name. how is it create?!
    var rows = this.state.data.map(function(person, i){
      return <PersonRow data={person} key={i} />;
    });

    return <table>{rows}</table>;
  },
});

var PersonRow = React.createClass({
  render: function(){
    return (
      <tr>
        <td>{this.props.data.id}</td>
        <td>{this.props.data.fname}</td>
        <td>{this.props.data.lname}</td>
      </tr>
    );
  },
});

module.exports = PersonTable;