Why is React Toastify is Display HTML text

Question

I am working on a react project and i used React toastify component. when i call the toast, it does appear exactly where and how i want it to appear, on the top right corner of the screen.

BUT! There is some text that appears in the location where the code i wrote for calling the toast is. I hope i make sense. Let me illustrate.

As you can see, the toast appears properly, but there is some text on top of my form.

return (
   <div>
       <ToastContainer />

       {success && toast.success(successMessage)}
       {error && toast.error(errorMessage)}

       {signupForm()}
   </div>
)

And it seems this text is sitting exactly in relation to my code, where the toast is being called. Maybe im missing something very silly here. but i need help

Answer 1

I Finally found an answer to my own question. I'll just post it here just in case someone else run into the same problem.

I made the horrible mistake of calling my toasts inside of my return of the actual component. What I should've done is, call the toasts within my logic.

When i call the toast where i return my component, The toast becomes part of my component. And the toast's ID gets displayed.

For example...

        apiCall().then(response => {
            if (response.error) {
                toast.dismiss();
                toast.error(response.error);
            } else {
                toast.dismiss();
                toast.success(response.message);
            }

        });

As you can see from my code, I am calling the toasts inside my logic immediately when I encounter the error or the success.