React: map()を使ってtableを作成

var tableTtlTxt = ['name', 'address', 'zip'];

var tableData = [
    {id: 1, name: 'Ichiro Suzuki', address: 'Miami', zip: '100-1000'},
    {id: 2, name: 'Masahiro Tanaka', address: 'NewYork', zip: '110-1100'},
    {id: 3, name: 'Dal Yu', address: 'Texas', zip: '111-1110'}
];

var TableBeadroll = React.createClass({
    render: function(){
        return (<table>{this.props.children}</table>);
    }
});

TableBeadroll.Head = React.createClass({
    render: function(){
        var tableTtl = this.props.title.map(function(cName, i){//二つ目の引数でindexを生成
            return(<th key={i}>{cName}</th>);//key属性にindexを渡す
        });
        return(<thead><tr>{tableTtl}</tr></thead>);
    }
});

TableBeadroll.Body = React.createClass({
    render: function(){
        var tableRow = this.props.data.map(function(person){
            return (<tr key={person.id}>
                <td>{person.name}</td>
                <td>{person.address}</td>
                <td>{person.zip}</td>
            </tr>);
        });
        return (<tbody>{tableRow}</tbody>);
    }
});
            
var DispTable = React.createClass({
    render: function(){
        return(<TableBeadroll>
            <TableBeadroll.Head title={this.props.title} />
            <TableBeadroll.Body data={this.props.data} />
        </TableBeadroll>);
    }
});

ReactDOM.render(
    <DispTable title={tableTtlTxt} data={tableData} />,
    document.getElementById('hoge1')
);