React-toastify: custom closeButton element does not close toast

[johlrich]

If you disable closeOnClick and supply a custom element to closeButton, then you can see that the button will not actually close the toast. When inspecting the virtual dom it appears the closeToast function is being placed on a closeToast prop instead of onClick on the custom element.

You also get the following warning in the console:

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.

Here's a minimal repro showing the issue:

If I'm correct that this is an issue, I can submit a PR with the fix + updated test if you wanted.

Thanks for the great library!

[fkhadra]

Hello @johlrich,

Thanks for the feedback, appreciate.

I modified your sample to make it works. You have to pass a component instead of a node.
Inside your component, you need to bind closeToast to the event of your choice to close the toast.

The prop is not called onClick but closeToast for consistency, one can decide to close the toast by filling an input for instance.

[johlrich]

Makes sense! Thanks again for the feedback and library.