get data from json file in react table bootstrap

Question

I have a data grid from react bootstrap table http://allenfang.github.io/react-bootstrap-table/start.html. i want to get data from external json file. i have tried this but in my table there is no data. where i do wrong?

c

lass Grid extends React.Component {
  constructor() {
    super();
    this.state = {
        products:[]
    };
}

  componentDidMount() {
    this.loadData()
}
loadData() {
    $.ajax({
          url: '../Component/products',
          dataType: 'json',
          success: function(products) {
              this.setState({products: products});
          }.bind(this)
        });
}

  handleBtnClick = () => {
    if (order === 'desc') {
      this.refs.table.handleSort('asc', 'name');
      order = 'asc';
    } else {
      this.refs.table.handleSort('desc', 'name');
      order = 'desc';
    }
}

  render() {
    return (
        <div className="content container-fluid">
             <div className="mainTotal container-fluid">
                <div className="col-xs-12">
                    <BootstrapTable tableHeaderClass='my-header-class'  hover data={ this.state.products }  cellEdit={ cellEditProp } selectRow={ selectRowProp } deleteRow={true} insertRow={true}  search={ true } options={ options } pagination>
                        <TableHeaderColumn width='78'  dataField='id' autoValue={ true } headerAlign='center' dataAlign='center'  isKey={ true } > id</TableHeaderColumn>
                        <TableHeaderColumn width='100'  ref='name' dataField='name' dataSort headerAlign='center' dataAlign='center'  editable={ { type: 'textarea' } } filter={ { type: 'TextFilter', delay: 10 ,placeholder: '...' } }> name</TableHeaderColumn>
                   </BootstrapTable>
                </div>
            </div>
        </div>
    );
  }
}
export default Grid;

and this is my json file:

 products = [{
    id: 1,
    name: "name1",

}, {
    id: 2,
    name: "name2",
}, ];