How to edit the loading table reaction and save data after editing

Question

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

my project code 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); }); } 

responsive bootstrap 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

Speaking of v3.0.0-beta-11 (I haven't used it before).

No problems.

But in your code you are not in the right area.

So just fix it so that onAfterSaveCell is called in the scope of your component:

 afterSaveCell: this.onAfterSaveCell.bind(this)