https://codesandbox.io/s/l2qkywz7xl?from-embed=&file=/index.js
Hi referring to above sandbox, I would like to do something to my table as well, how can I add the undo function in my code?
const deleteCustomer = (ID) => {
if (window.confirm("Are you sure you want to delete?")) {
Axios.delete(`http://localhost:3001/stats/delete/${ID}`).then(
(response) => {
setCustomerList(
customerList.filter((val) => {
toast("notify");
console.log("toast notify run");
return val.ID !== ID;
})
);
}
);
}
};
const displayCustomers = customerList
.slice(pagesVisited, pagesVisited + customersPerPage)
.map((val, key) => {
const dateStr = new Date(val.latest_time_of_visit).toLocaleDateString(
"en-CA"
);
const timeStr = new Date(val.latest_time_of_visit).toLocaleTimeString();
const dateTime = `${dateStr} ${timeStr}`;
const my_serial = key + pageNumber * customersPerPage;
return (
<tr>
{/*}
<td>{val.ID}</td>
<td>{my_serial + 1}</td>
*/}
<td>{val.name}</td>
<td>{val.email}</td>
<td>{val.company_name}</td>
<td>{val.counts_of_visit}</td>
<td>{dateTime}</td>
<td>{val.contacted}</td>
<td>
<select
onChange={(event) => {
setNewContacted(event.target.value);
}}
>
<option value="" selected disabled hidden>
Select Yes/No
</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<button
className="btn btn-primary"
onClick={() => {
updateCustomerContacted(val.ID);
}}
>
Update
</button>
</td>
<td>
<button
className="btn btn-danger"
onClick={() => {
deleteCustomer(val.ID);
}}
>
Delete
</button>
yep so I have this crud table with a delete button and when I click it it runs deleteCustomer function, but I want do it like just like the sandbox how can I change my code?