0

in my next js component i am using the react-hook-form. when i am submitting the form i wish to toast the user a success\error msg. no matter what i do, i can not make the toast work. my code:

component...

const {register, reset, handleSubmit,formState: { errors }, } = useForm<BaseUser>({
        resolver: yupResolver(validationSchema),
      });
const showToastMessage = () => {
        toast.success('Success Notification !', {
            position: toast.POSITION.TOP_RIGHT
        });
    };
      
const onSubmit = handleSubmit( async (data) => {
        try{
            let res;
            formType === "login"? 
            res = await authService.singin(data) 
            : res = await authService.signup(data)
            localStorage.setItem('user', JSON.stringify(res.data.data));
            showToastMessage()
            //push("/map")
        
        } catch(error) {
        if (error instanceof AxiosError){
            console.log("errer", error.response)
            setSubmitError(error.response?.data.message)
            showToastMessage()

        }}
    });

...continue

no matter if the call succeed or not i never see the toast does anyone knows what i am doing wrong?

helpper
  • 2,058
  • 4
  • 13
  • 32
  • r u sure you set up `toast` correctly. did you test it if it works outside of react-hook-form – Yilmaz May 08 '23 at 20:47

1 Answers1

0

You might have forgotten to render <ToastContainer/> on that page or in the index of your project.

On that page you can import { ToastContainer } from 'react-toastify'; and render it somewhere on your page like this

or do it in the index.js of your app so that it will be available on all pages(this way you can use toasts anywhere in your app.

Issa
  • 161
  • 1
  • 9