twice loaded same time

[cyaxares]

Hello

I use this component fkhadra/react-toastify, twice loaded for me same time, i want only once loaded other thing is correct and i dont have wrong or error on code writting , What is your solution ?

notify({type,text}){ toast(text, { position: "top-center", autoClose: 5000, hideProgressBar: false, closeOnClick: true, pauseOnHover: true, draggable: true, type: type }); }

Thanks

[fkhadra]

Hello @cyaxares,

I don't understand your question. Could you describe me the current behavior?

Thanks.

[Claim0013]

Hey @fkhadra , I think I know what @cyaxares means.

I'm also using toastify since it's really intuitive. There's one issue though. When autoClose > 2000 I get two toasts.

For example, if I set autoClose=5000, then the first toast that shows up, disappears in about 2 seconds, then a second one shows up and stays there for around 5 seconds.

I could provide a gif if you need some visual aid.

[fkhadra]

Hey @Claim0013,

Yes, please 😁

[Claim0013]

Hold up! :>

[Claim0013]

Here's the gif..

And here's the code

dispatch(action, toast.info("5 seconds")); - note that it also happens if I just call it somewhere else.

<ToastContainer
          autoClose={5000}
          closeOnClick
/>

[fkhadra]

Thanks a lot. Could you show me where you are rendering the ToastContainer component. The best is to render it at the root of your App.

Do you have a way to reproduce the bug on codesandbox ?

Thanks again

[Claim0013]

No problem. Mhh I may be using it wrong.

I use <ToastContainer..> in each Components' main <div>...</<div> So, everywhere I nee a popup, in case I change something.

Sadly it's a quite large app.

[fkhadra]

Could you try to remove all the ToastContainer and use only one at the root of your app ?

[Claim0013]

If I remove

import { ToastContainer, toast } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css';

from a component and put it in let's say index.js - I automatically get a Failed to compile exception in the class I removed those lines.

[fkhadra]

Keep the toast import in your component as follow:

import { toast } from 'react-toastify';
// omit the ToastContainer and the css

Then at the root of your app:

import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

const App = () => (
  <div>
    <YourComponent />
    <ToastContainer />
  </div>
)

[Claim0013]

I added <ToastContainer /> and the imports (without toast) to the index.js file where my paths are. I am using react router.

Looks like this:

ReactDOM.render(
<Provider store={store}>
    <Router>
        <div>
            <PropsRoute exact path="/" component={App} store={store}/>
            <PrivateRouteA path="/pathA" component={A}/>
            <PrivateRouteB path="/pathB" component={B} />
            <PrivateRouteC path="/pathC" component={C} />
            <PrivateRouteD path="/pathD" component={D} />
            <PrivateRouteE path="/pathE" component={E} />
            <ToastContainer />
        </div>
    </Router>
</Provider>, document.getElementById('root'));

I am pretty sure I now only have once <ToastContainer /> in the whole app and it's doing this - there's the 5 second toast and then it looks like a 2 seconds one moves around behind it.

EDIT: I solved it. There was still one <ToastContainer /> hanging around. I can't set the autoClose prop though. It's getting ignored.

toast.info("Hello", {autoClose: 2000, hideProgressBar: true} ) still yields a 5 seconds toast with a progress bar.

If I use <ToastContainer autoClose={2000} /> it overrides all toasts to 2 seconds and changing toast's props like autoClose: 5000 doesn't do anything.

EDIT: All works, I am just too stupid to see that there's a difference between

toast.info("Hello"), {autoClose: 2000, hideProgressBar: true}) and
toast.info("Hello", {autoClose: 2000, hideProgressBar: true}))

Sorry for wasting your time 😭

[fkhadra]

Hey @Claim0013,

Sorry, I couldn't answer earlier, I'm glad you fixed your issue. Everything works as expected for you now?

[Claim0013]

No worries @fkhadra ! Yes it's working flawlessly!