How can i pass dynamic variable to toast.promise loading? about react-hot-toast

[nakamuraos]

My solution is to use useRef.

This is implement example:

import { useRef } from "react";

const MyComponent = (props: any) => {
  const textRef = useRef<HTMLSpanElement>(null);

  const updateText = (text: string) => {
    if (textRef?.current) textRef.current.innerText = text;
  };

  const onHandle = async () => {
    updateText("Initiating...");
    await delay(3000);

    updateText("Optimizing images...");
    await delay(3000);

    updateText("Saving...");
  };

  const onClick = () => {
    toast.promise(onHandle(), {
      loading: <span ref={textRef}>Saving...</span>,
      success: "Successfully!",
      error: (error) => {
        console.log(error);
        return "Something were wrong.";
      },
    });
  };

  return (
    <div>
      <button onClick={onClick}>Show me</button>
    </div>
  );
};