What's the best way to dismiss a toast when retrying an action?

[runoncedev]

I'm trying to dismiss a toast once the user starts retrying some action.

My current solution involves storing the toast ID with useState():

import { useToast } from "@/components/ui/use-toast";

export default function Component() {
  const [toastId, setToastId] = useState();

  const { toast, dismiss } = useToast();

  const onSubmit = async () => {
    if (toastId) {
      dismiss(toastId);
    }

    try {
      // Some async code here...
    } catch (error) {
      const { id } = toast({
        title: "Error!",
      });

      setToastId(id);
    }
  };

  return (
    <p>Some content...</p>
  );
}

Tried using useRef() instead but TypeScript complains when I try to set the current attribute.

Do you know if there might be a better way for achieving this?

[onurhan1337]

In this example, I've provided the type string | null to useRef to indicate that it will hold a string value or null. This should help TypeScript recognize that toastIdRef.current is indeed a string when you try to use it with dismiss.

import { useToast } from "@/components/ui/use-toast";
import { useRef } from "react";

export default function Component() {
  const toastIdRef = useRef<string | null>(null); // Provide the type (string) for useRef

  const { toast, dismiss } = useToast();

  const onSubmit = async () => {
    if (toastIdRef.current) {
      dismiss(toastIdRef.current);
    }

    try {
      // Some async code here...
    } catch (error) {
      const { id } = toast({
        title: "Error!",
      });

      toastIdRef.current = id;
    }
  };

  return <p>Some content...</p>;
}

[runoncedev]

Yes, that works! Thank you.

[alamenai]

Question:

How to track onDismiss event?

I have tried onOpenChange but it did not work:

 toast({
      title: "Footprint wird bearbeitet",
      description: "Möchten Sie die Änderungen speichern oder abbrechen?",
      duration: Infinity,
      className: "fixed bottom-8 right-20 z-50 w-auto max-w-lg",
      onOpenChange(open) {
        if (!open) {
          handleCancel()
        }
      },
      action: (
        <div className='flex gap-2'>
          <ToastAction className='bg-blue-600 hover:bg-blue-700 text-white' altText='Speichern' onClick={handleSave}>
            Speichern
          </ToastAction>
          <ToastAction altText='Abbrechen' onClick={handleCancel}>
            Abbrechen
          </ToastAction>
        </div>
      ),
    })