Open rrikesh opened 3 years ago
Update:
It seems that no toast loads in componentDidMount
on initial page load, but if you hot reload the page after making an edit to App.js, the toast will then appear.
import React, { Component } from "react";
import toast, { Toaster } from "react-hot-toast";
class App extends Component {
componentDidMount() {
console.log("mounted");
// Won't be displayed on page load
let toastID = toast.loading("Loading toast");
console.log(toastID);
}
render() {
return (
<div>
<Toaster />
</div>
);
}
}
export default App;
However, it is working when I'm using the useEffect
hook:
import React, { useEffect } from "react";
import toast, { Toaster } from "react-hot-toast";
function App() {
useEffect(() => {
console.log("mounted");
// Now being displayed
let toastID = toast.loading("Loading toast");
console.log(toastID);
}, []);
return (
<div>
<Toaster />
</div>
);
}
export default App;
Do you have any idea of the cause of the issue?
I have same issue.
I ended up having a acceptable workaround for this.
I put <Toaster />
at ReactDOM.render level:
ReactDOM.render(
<React.StrictMode>
<App />
<Toaster />
</React.StrictMode>,
document.getElementById('root')
);
The toast won't show on the first page load in useEffect
when I'm using toast()
, until I add setTimeout
:
useEffect(() => {
const timeout = setTimeout(() => {
toast(<span>My toast</span>);
});
return () => clearTimeout(timeout);
}, []);
Hi, I'm having an issue using
toast.promise()
and I can't figure out what's wrong with my code. Theloading
toast doesn't get displayed at all. Thesuccess
/error
toasts appear after the fetch is complete, all good here.Weirdly, if I uncomment the
toast("Hey")
(see code below) in the render function, then the loading toast is displayed too (there's also a number that appears on top of the page).Steps to reproduce on a fresh React install:
src/App.js
:const notify = () => toast("Here is your toast.");
class App extends React.Component { componentDidMount() { console.log("mounted");
} render() { return (
Edit
Learn Reactsrc/App.js
and save to reload.} }
export default App;