I am using react-bootstrap-table-next to implement crud functionalities. I need a situation whereby after the inline editing is done the data is saved to the database. Right now, after reloading the page the data-table returns back to its initial state.
These are my codes below
const
const [data, setData] = useState([]);
const apiUrl = 'api/terminals';
cellEdit-block
const cellEdit = cellEditFactory({
mode: 'dbclick',
blurToSave: true,
afterSaveCell: onAfterSaveCell,
});
api call
const onAfterSaveCell = (value, name) => {
axios({
method: 'POST',
url: apiUrl,
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
data: {
name: value[name],
},
}).then(response => {
setData(response);
});
};
jsx
<>
<BootstrapTable
keyField="id"
data={data}
columns={columns}
striped
hover
condensed
pagination={paginationFactory()}
cellEdit={cellEdit}
filter={filterFactory()}
noDataIndication="Table is Empty"
/>
</>
I get these errors on the console when I try this formula
react.development.js:220 Warning: Failed prop type: Invalid prop `data` of type `object`
supplied to `DataProvider`, expected `array`.