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

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?

[afozbek]

If anyone still doesnt understand the solution, all you have to do that create a React element as a wrapper for toastContent.

Old Code

// toast component
import { toast as alert } from "react-toastify";

const toast = (message, hasSuccess = true) => {
  // destructuring props

  // state

  // effect

  // other variables/functions
  let toastIcon = hasSuccess ? <i className="icon-success"></i> : <i className="icon-exclamation"></i>;
  let toastType = hasSuccess ? TOAST_TYPES.SUCCESS : TOAST_TYPES.ERROR;
  // render
  const toastContent = (
      <Col className="toast-content-wrapper">
        <div className="toast-icon">{toastIcon}</div>
        <div className="toast-message">{message}</div>
      </Col>
  );
  
  // toastType -> success | error -> toast.success | toast.error
  return (
    alert[toastType](toastContent)
  );
};

New Code

import { toast as alert } from "react-toastify";
// This container required for the first parameter of the toast function
const Container = (props) => <div>{props.children}</div>;

const toast = (message, hasSuccess = true) => {
  // destructuring props

  // state

  // effect

  // other variables/functions
  let toastIcon = hasSuccess ? <i className="icon-success"></i> : <i className="icon-exclamation"></i>;
  let toastType = hasSuccess ? TOAST_TYPES.SUCCESS : TOAST_TYPES.ERROR;
  // render
  const toastContent = (
    <Container>
      <Col className="toast-content-wrapper">
        <div className="toast-icon">{toastIcon}</div>
        <div className="toast-message">{message}</div>
      </Col>
    </Container>
  );
  return (
    alert[toastType](toastContent)
  );
};

[alish1129]

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