Toast appearing again all together when modal is opened

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]

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( <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’));

— 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-802158299, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJTAVEJO3V5WSQ3FV3H3V7TTEI37TANCNFSM4ZMFPVCQ .