React-toastify: Warning: React does not recognize the `closeToast` on using custom css classes

[caype]

Hello,

I'm using custom css classes in my web-app to style the default toastr message. The resultant toastr message looks like this:

and I am using the following code to display a toastr and everything works well.

toast.success(We have successfully updated your preference., { className: "toasterSuccess", });

But, React throws me this warning whenever a toastr message is displayed on the screen:

Warning: React does not recognize the closeToast prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase closetoast instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Can someone help me in suppressing these warnings?

[fkhadra]

Hello @caype,

Could you share a code snippet on codesanbox for instance.

Which version of react are you using ?

Thanks

[caype]

Hey @fkhadra ,

I'm using React 16.3.2. you can find the behaviour in this sandbox.

screenshot of the error on codesandbox.io:

Thanks in Advance.

[caype]

I understood what's going wrong. Instead of implementing a component for the closeButton prop, I'm directly passing in an Image tag for that prop.

Thanks again for the library 👍

[fkhadra]

@caype I was about to answer. I'm glad you solved the issue.

Thanks again for the library 👍

My pleasure 😁

[alish1129]

What's the answer to this error? I am getting it but I haven't used any closeButton or closeToast prop.