How to edit react bootstrap table and save data after editing

Question

how to edit table directly on the browser page and save data after reloading page. The table is made using react bootstrap table.screenshot of project is here.edit and save like in screenshot

code of my project is here.

onAfterSaveCell(value, name){
axios({
method:'post',
url:'https://something.something.com.somewhere/update_something',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'x-access-token':this.state.token
},
data:{
name:value[name]
}
})
.then((response)=>{
this .getCustomerData();
})
.catch((error)=>{
throw('error',error);
});
 }

react bootstrap is here

<BootstrapTable data={this.state.customer_data} search={true} cellEdit={ {
  mode: "click",
  blurToSave: true,
  afterSaveCell: this.onAfterSaveCell
 } } >
    <TableHeaderColumn dataField="tid" isKey = {true} dataSort={true} width="70">S.No</TableHeaderColumn>
    <TableHeaderColumn dataField="company_name" dataSort={true}>Company Name</TableHeaderColumn>
    <TableHeaderColumn dataField="contact_address" dataSort={true}>Contact Address</TableHeaderColumn>
    <TableHeaderColumn dataField="contact_person" dataSort={true}>Contact Person</TableHeaderColumn>
    <TableHeaderColumn dataField="contact_number" dataSort = {true}>Contact Number</TableHeaderColumn>
 </BootstrapTable>

Answer 1

Talking about v3.0.0-beta-11 (I didn't use it before).

There is no problem.

But in your code, you aren't in the right scope.

So just fix it so that onAfterSaveCell is called on your Component scope:

afterSaveCell: this.onAfterSaveCell.bind(this)