Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

`closeToast` does not work

See original GitHub issue

Here is a sample from the doc, you can also try it on codesandbox :

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

const Msg = ({ closeToast, toastProps }) => (
    Lorem ipsum dolor {toastProps.position}
    <button onClick={closeToast}>Close</button>

export default function App() {
  const displayMsg = () => {
    toast(<Msg />);
    // toast(Msg) would also work

  return (
      <button onClick={displayMsg}>Click me</button>
      <ToastContainer />

The toast should close when the close button is clicked, but it’s not. I tried in practice in my own code, it does not work either.

({ closeToast, toastProps }) => closeToast() // Broken
({ closeToast, toastProps }) => toastProps.closeToast() // Broken
({ closeToast, toastProps }) => toastProps.deleteToast() // Works, but there is no animation (it's expected I believe)

What’s required to make this work ?

Versions : react-toastify 7.0.3 react 17.0.1

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

JesusTheHuncommented, Feb 15, 2021

I c/c’ed the css into my style sheet and I’m customizing it. Things gonna work out ! Thank you for your quick responses

fkhadracommented, Feb 15, 2021

Indeed, the lib listens to onAnimatedEnd event to remove the element from the queue. With the minimal stylesheet, the element is removed but after a delay. Edit autumn-frog-n5rj7

Regarding your customization, isn’t it something that can be done by overriding some existing classes?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Warning: React does not recognize the `closeToast` on using ...
Hello,. I'm using custom css classes in my web-app to style the default toastr message. The resultant toastr message looks like this:.
Read more >
Toast is not rendered (react-toastify component) - Stack Overflow
ACTION.MOUNTED, function (containerInstance) { container = containerInstance; toaster.isActive = function (id) ...
Read more >
React does not recognize the `closeToast` prop on a DOM ...
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 ......
Read more >
Render more than string | React-Toastify - GitHub Pages
When you render a component, a closeToast prop and the toastProps are injected into your component. Copy. import React from 'react';.
Read more >
react-toastify - Bountysource
The problem is multiple fold (but possibly related): ... React does not recognize the `closeToast` prop on a DOM element. $ 0.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found