How can I add an undo button on my toast notification?

Question

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?

import { toast, ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
toast.configure()
  const deleteCustomer = (ID) => {
    if (window.confirm("Are you sure you want to delete?")) {
      Axios.delete(`http://localhost:3001/stats/delete/${ID}`).then(
        (response) => {
    toast("row deleted");
          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>

So after I press the delete button which calls the deleteCustomer, my toast notfication row deleted comes out, but how can Iadd an undo button to it?

From the sandbox, the undo button is already there in your toast? So what exactly is your question? — Robert Tirta, Jun 10 '21 at 06:14
@RobertTirta from my posted code, how can i add an undo button in toast notification — fyceheist, Jun 10 '21 at 06:20
I see, are you also using `"react-toastify";` package? do you want to show us your code sandbox so we can edit it? I need more context. If you're trying to use the same package or different one etc — Robert Tirta, Jun 10 '21 at 23:50
@RobertTirta I am also using react toastify package I am not sure how to create a sandbox.. as my data is pulled from backend api — fyceheist, Jun 11 '21 at 03:43

score 1 · Answer 1 · answered Jun 13 '21 at 23:56

You forgot to put <ToastContainer /> as stated in the docs for the component to be mounted.

Then you need to put a component in the toast() function as an undo button to put your logic in.

Your code, because its not complete, should be somewhere around like this

import { toast, ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
toast.configure()
  const deleteCustomer = (ID) => {
    if (window.confirm("Are you sure you want to delete?")) {
      Axios.delete(`http://localhost:3001/stats/delete/${ID}`).then(
        (response) => {
    toast("row deleted");
          setCustomerList(
            customerList.filter((val) => {
              toast(<button onClick={() => console.log("your undo logic here"}>UNDO</button>);
              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>
          </td>
          <ToastContainer closeOnClick={false} closeButton={false} />

so it's basically an addition of this? But how do I add an undo button in the toast() function? — fyceheist, Jun 14 '21 at 02:09
I just show you how, the `toast()` function accepts component as a param. So you have to make the component yourself, I put the undo button in as well. Please refer to my code — Robert Tirta, Jun 14 '21 at 02:26
tira oh i cant see it is it possible to create a code snippet, is it this that creates the button? — fyceheist, Jun 14 '21 at 06:01
Tira So how??? is that toast container then create a component? — fyceheist, Jun 14 '21 at 17:31

How can I add an undo button on my toast notification?

1 Answers1