Toast appearing again all together when modal is opened

[Sagr859]

Reporting a BUG (ReactJs)

Toast is generated as a whole group where is isnt needed.

Bug is only visible at a certain part of the whole project. The part being the parent component of the whole project. After generating the toasts (where its meant to be shown and comes,) if any modal is opened in the parent component, all the toasts that was generated is generated again. Not an issue of any other third party packages, since the modal (in the image) is made from scrap using only pure css.

.ViewProfile-Modal{
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 5px; /* Location of the box */
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.ViewProfile-Modal-open{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.ViewProfile-Modal-content{
  background-color: #fefefe;
  margin: auto;
  margin-bottom: 1px;
  padding: 40px 20px 20px 20px;
  border-radius: 30px;
  border:none;
  width: 25%;
  /* min-height:10vh; */
  position: relative;
}

ToastComponent is called at all files wherever its needed, just before the closing of the main div in each component. The toasts are listed the way they were generated. Versions: "react": "^16.13.1", "react-toast-notifications": "^2.4.0", "react-toastify": "^6.0.9",

[fkhadra]

I'm not sure to understand your issue. Do you want to remove all notifications when you open the modal ? Can you provide a minimal reproduction on code sanbox?

[Sagr859]

Firstly, thank you for a quick response for my issue. To clarify my problem I am attaching a video which shows the issue. The project is now in production so I cannot provide my code. But you can see the problem in https://classroom.eddzi.com

Note: im using ReactJs 16.x, following new methodology (using functional components with Hooks, redux, axios instead of class components). Almost 70% all pages inside my react src file contain a toast accompanied by 'ToastContainer' at the end of the code to generate the toast. The problem is only visible in the parent page.

I believe the screenshots I'm sharing will help you....(it's still in beta stage) Among the 3 pictures, 'Screenshot from 2021-03-18 20-49-12cp.png' shows the projects' file structure and hierarchy. (the highlighted page is which was shown in the video, the modal ). The other two show you how I call the toast function.

Please help me. Thank you

On Thu, Mar 18, 2021 at 4:48 PM Fadi Khadra @.***> wrote:

I'm not sure to understand your issue. Do you want to remove all notifications when you open the modal ? Can you provide a minimal reproduction on code sanbox?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/fkhadra/react-toastify/issues/583#issuecomment-801838960, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJTAVEK2PQNBDVBW3RRZTDLTEHORDANCNFSM4ZMFPVCQ .

[fkhadra]

So I saw that in every component you import the ToastContainer and the stylesheet. Insert the ToastContainer and the stylesheet only once in your app. For example in index.js, also, inject the CSS there.

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Provider store={store}>
        {/* <PersistGate > */}
          <App />
        {/* </PersistGate> */}
      </Provider>
    </BrowserRouter> 
   <ToastContainer 
                  position="top-right"
                  autoClose={5000}
                  hideProgressBar
                  newestOnTop
                  closeOnClick
                  rtl={false}
                  pauseOnFocusLoss={false}
                  draggable={false}
                  pauseOnHover
    />
  </React.StrictMode>,
  document.getElementById('root')
);

[Sagr859]

Thanks, I'll check it out. 😉😋😇

On Thu, Mar 18, 2021 at 11:16 PM Fadi Khadra @.***> wrote:

So I saw that in every component you import the ToastContainer and the stylesheet. Insert the ToastContainer and the stylesheet only once in your app. For example in index.js, also, inject the CSS there.

ReactDOM.render(

{/* */} {/* */} , document.getElementById('root')); — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub , or unsubscribe .

[Sagr859]

Man, that was quick!!!! thank you so much @fkhadra and react-toastify team for such a fast response.... Thank you so much!!!!!