something.jsx

var Content = React.createClass({
    render: function() {
        var view = "/projects/view/" + this.props.content.id;
        var edit = "/projects/edit/" + this.props.content.id;
        var remove = "/projects/delete/" + this.props.content.id;
        return (
            <tr role="row" className="even">
                <td className="sorting_1"><a href={ edit }>{ this.props.content.id }</a></td>
                <td>{this.props.content.client}</td>
                <td>{this.props.content.name}</td>
                <td>{this.props.content.area}</td>
                <td>{this.props.content.code}</td>
                <td>
                    <div className="btn-group">
                        <button type="button" className="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Action <span class="caret"></span>
                        </button>
                        <ul className="dropdown-menu">
                            <li><a href={ edit }>Edit</a></li>
                            <li role="separator" className="divider"></li>
                            <li><a href={ remove }>Remove</a></li>
                        </ul>
                    </div>
                </td>
            </tr>
        );
    }
});

var ListContent = React.createClass({
    render: function() {
        var Contents = this.props.data.map(function(content) {
            return (
                <Content content={content} key={content.id}>
                  {content.name}
                </Content>
            );
        });
        return (
            <tbody>
                {Contents}
            </tbody>
        );
    }
});

var ListUsers = React.createClass({
  getInitialState: function () {
      return {
          data: [],
          contentState: "1"
      };
  },
  componentWillMount: function () {
      $.ajax({
          url: this.props.url,
          dataType: 'json',
          cache: false,
          success: function(data) {
              this.setState({data: data});
          }.bind(this),
          error: function(data, status, err) {
              console.log(this.props.url, status, err.toString());
          }.bind(this)
      });
  },
  componentDidUpdate: function () {
    $('#list_users_table').DataTable( {
      "paging": true,
      "lengthChange": false,
      "searching": true,
      "ordering": true,
      "info": true,
      "autoWidth": false,
      "sDom": 'lfrtip'
    });
  },
  render: function() {
      return (
          <div className="row">
              <div className="col-xs-12">
                  <div className="box">
                      <div className="box-body">
                          <div id="example2_wrapper" className="dataTables_wrapper form-inline dt-bootstrap">
                              <div className="row">
                                  <div className="col-sm-6"></div>
                                  <div className="col-sm-6"></div>
                              </div>
                              <div className="row">
                                  <div className="col-sm-12">
                                      <table id="list_users_table" className="table table-bordered table-hover dataTable" role="grid" aria-describedby="example2_info">
                                          <thead>
                                              <tr role="row">
                                                  <th className="sorting_asc" tabIndex="0" aria-controls="example2" rowSpan="1" colSpan="1" aria-sort="ascending" aria-label="Project ID">Project ID</th>
                                                  <th className="sorting" tabIndex="0" aria-controls="example2" rowSpan="1" colSpan="1" aria-label="Client">Client</th>
                                                  <th className="sorting" tabIndex="0" aria-controls="example2" rowSpan="1" colSpan="1" aria-label="Project Name">Project Name</th>
                                                  <th className="sorting" tabIndex="0" aria-controls="example2" rowSpan="1" colSpan="1" aria-label="Project Area">Project Area</th>
                                                  <th className="sorting" tabIndex="0" aria-controls="example2" rowSpan="1" colSpan="1" aria-label="Project Code">Project Code</th>
                                                  <th className="sorting" tabIndex="0" aria-controls="example2" rowSpan="1" colSpan="1" aria-label="Options">Options</th>
                                              </tr>
                                          </thead>
                                          <ListContent data={this.state.data} />
                                      </table>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      );
  }
});

ReactDOM.render(
    <ListUsers url='/projects/list'/>,
    document.getElementById('list_projects')
);