react toastify clear or false when button click

Question

I am using react-toastify for my form. currently i show the message when error or success message. when user's click again i need to clear or hide all type of toast notifications. please check below code.

Used library for toast https://www.npmjs.com/package/react-toastify

      const addRecord= (form) => {
     toast.hide(); // i need to hide all toast notification 
    const header = {
      Auth_token: `${appUserConfig.accessTokenName}=${appUserConfig.accessToken}`,
      User_name: appUserConfig.userName,
    };
    httpPost(SAVE_INVOICE, data, header)
      .then((response) => {

        if (response.status === 200) {
          toast.success('Successfully Saved', { position: toast.POSITION.TOP_RIGHT })
        }

      })
      .catch((e) => {
        console.log("e:", e);
        toast.error('Something went wrong', { position: toast.POSITION.TOP_RIGHT, autoClose: false })

      });

  }

according to my requirement, I need to keep error message toast without autoClose. There fore when user click again add button i need to clear all toast notification. How i do this

Answer 1

You might want to check its documentation for clearing all the toast. Here is what i have found

Ref: https://fkhadra.github.io/react-toastify/remove-toast

To remove all the toast use:

toast.dismiss();

In your context do like this.

const addRecord= (form) => {
     toast.dismiss(); // i need to hide all toast notification 
    const header = {
      Auth_token: `${appUserConfig.accessTokenName}=${appUserConfig.accessToken}`,
      User_name: appUserConfig.userName,
    };
    httpPost(SAVE_INVOICE, data, header)
      .then((response) => {

        if (response.status === 200) {
          toast.success('Successfully Saved', { position: toast.POSITION.TOP_RIGHT })
        }

      })
      .catch((e) => {
        console.log("e:", e);
        toast.error('Something went wrong', { position: toast.POSITION.TOP_RIGHT, autoClose: false })

      });

  }