React does not recognize the `closeToast` prop on a DOM element.

[hello2parth]

I am getting following console warning every time, I invoke toast.

react_devtools_backend.js:2430 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.

<ToastContainer transition={Slide} className="toast-notification" toastClassName={classes.toastNotificationBody} hideProgressBar pauseOnHover autoClose={autoClose} position={position} closeButton={false} closeOnClick />

react-tostify version: "5.5.0", "react": "^16.12.0",

How can I resolve this console error?

[fkhadra]

Hey @hello2parth, I suggest you upgrade to the latest version.

[atulmy]

I'm using "react-toastify": "^7.0.4", but still face this issue:

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. at svg at div at ToastTransition (webpack-internal:///./node_modules/react-toastify/dist/react-toastify.esm.js:148:26)

[atulmy]

Warning is triggered when using closeButton prop

import { IconClose } from '../ui/icons/close'

<ToastContainer
  hideProgressBar={true}
  transition={Zoom}
  position={toast.POSITION.BOTTOM_LEFT}
  closeButton={IconClose}
/>

[iserranoe]

As mentioned in the documentation, when you use a custom close button, your button will receive a closeToast function. You need to use it to close the toast: https://fkhadra.github.io/react-toastify/use-a-custom-close-button-or-remove-it/

  import React from 'react';
  import { toast, ToastContainer } from 'react-toastify';

  const CloseButton = ({ closeToast }) => (
    <i
      className="material-icons"
      onClick={closeToast}
    >
    delete
    </i>
  );

function App() {
  const notify = () => {
    toast("The close button change when Chuck Norris display a toast");
  };

  return (
    <div>
      <button onClick={notify}>Notify</button>;
      <ToastContainer closeButton={CloseButton} />
    </div>
  );
}

When defining the CloseButton function, the warning disappears.

[sebastienbarre]

<ToastContainer
    closeButton={false}
  />

I'm getting the warning too. Pretty sure it started when I updated to version 8. I'm at 8.0.3. I also tried to pass closeButton as false when invoking toast(), that didn't help. I even tried, closeButton={() => null}, no dice.

[fkhadra]

@sebastienbarre could you reproduce your issue on codesanbox? Thank you

[sebastienbarre]

@fkhadra yup, here it is https://codesandbox.io/s/react-toastify-container-styled-forked-qp7rv

[fkhadra]

@sebastienbarre the thing is that you are spreading all the props to the div. When you render a custom component some props that are not HTML attributes are passed to your component https://fkhadra.github.io/react-toastify/render-what-you-want/. THis is way you have this warning

// props contains {closeToast: Fn, toastProps: Object, data: Object}
const MyToast = (props) => <div {...props}>Hello World</div>;