closeToast / toastProps warnings in the console

[dkocich]

Do you want to request a feature or report a bug?

bug

What is the current behavior?

• dev console prints warnings repeatedly

react-dom.development.js:86 Warning: React does not recognize the closeToastprop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercaseclosetoast instead. If you accidentally passed it from a parent component, remove it from the DOM element.

react-dom.development.js:86 Warning: React does not recognize the toastPropsprop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercasetoastprops instead. If you accidentally passed it from a parent component, remove it from the DOM element.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your CodeSandbox (https://codesandbox.io/s/new) example below:

todo

What is the expected behavior?

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

chrome beta - Version 120.0.6099.5 (Official Build) beta (arm64) "react": "18.2.0",

[viktordarko]

I have a similar bug with isLoading:

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

basic usage: const doSomething = async (data) => { if (!data) { return toast.error("Please fill all the fields correctly"); } const toastId = toast.loading("Doing something..."); try { const response = await fetch( ${process.env.REACT_APP_BACKEND_URL}/api/do-something, { method: "POST", headers: { Accept: "application/json", "Content-Type": "application/json", }, body: JSON.stringify({ data }), } ); const parsed = await response.json(); if (response.ok) { return toast.update(toastId, { render: parsed.message, type: "success", theme: "dark", isLoading: false, autoClose: true, closeOnClick: true, }); } else { throw new Error(parsed.message); } } catch (error) { toast.update(toastId, { render: error.message, type: "error", isLoading: false, autoClose: true, closeOnClick: true, }); } };

It works properly but logs that on the console

[viktordarko]

Actually I just tested it as well with the toast.promise format and it also logs that in the console, even if it works properly.

example: const doSomething = async (data) => { if (!data) { return toast.error("Please fill all the fields correctly"); }

const fetchData = async () => { const response = await fetch( ${process.env.REACT_APP_BACKEND_URL}/api/do-something, ... const parsed = await response.json(); if (response.ok) { return parsed.message; } else { throw new Error(parsed.message); } };

toast.promise(fetchData(), { pending: "Doing Something...", success: { render({ data }) { return data.message; }, theme: "dark", autoClose: true, }, error: { render({ data }) { return data.message; }, }, } ); };

[cduff]

@viktordarko FYI I just created issue https://github.com/fkhadra/react-toastify/issues/1035

[fkhadra]

@dkocich can you share an example. Are you using a custom close button ? Thank you

[dkocich]

@fkhadra i have CRA "react-scripts": "5.0.1", with react admin https://marmelab.com/react-admin/ and have App.tsx root component where I use

    <div className="App">
...
      <ToastContainer
        autoClose={10000}
        closeOnClick={false}
        draggable
        hideProgressBar={false}
        limit={10}
        newestOnTop={false}
        pauseOnFocusLoss
        pauseOnHover
        position="bottom-right"
        rtl={false}
      />
    </div>

then i simply call toast(t("mytranslation")); in different files to show some feedback on actions / API calls that users make across the app. I believe this is the simplest possible setup. Console warnigs/errors appear when I load the page without any actions

EDIT

@fkhadra I guess that I found the issue - we have custom cache handling component wrapping our App.tsx that checks for the latest version after deployment and does a full reload. We notify here users that the reload will happen if it is required with

      toast.info(toastMsgContent(), {
        autoClose: false,
        hideProgressBar: true,
      });

Toast normally appears but as soon it is called, that makes those warnings appear. I guess its because my ToastContainer is defined in the child component.

[MahdiMhqq]

As I encountered the same issue I've created this sandbox for example. I've used Typography for content wrapper, each time I create a toast the error appears on the console.

See this example

Personally I guess the issue comes from these lines in the package, where the toastProps and closeToast have passed to cloned content element as Props.

    // src/core/containerObserver.ts
    // line: 174
    .
    .
    .
    if (isValidElement(content) && !isStr(content.type)) {
      toastContent = cloneElement(content as ReactElement, {
        closeToast,
        toastProps,
        data
      });
    } else if (isFn(content)) {
      toastContent = content({ closeToast, toastProps, data: data as TData });
    }
    .
    .
    .