React-toastify: Two toasts opening after updating to latest version

[gabrielHosino]

Hi, I decided to update the react-toastify in my project(to the latest version). After that, when I open a toast for some reason it opens a wrong toast (considering the style i set up) over my styled toast.

The image above shows the wrong toast, it appears on top of the right one, when i click on it, it disappears and the right one now is visible.

The other image is the right toast that i want to show to the user.I'll put below my code to the function that calls the toast.

 showAlert(title, msg) {
   const Msg = () =>
                 <Fragment>
                   <div className='col s12 modal-labels'>
                     <label className='modal-label-1'>{title}</label>
                   </div>
                   <div>
                     <label className='modal-label-2'>{msg}</label>
                   </div>
                 </Fragment>

     const options = {
       autoClose: 5000,
       type: toast.TYPE.INFO,
       hideProgressBar: false,
       closeButton: false,
       className: css({
         backgroundColor: '#EFEBE9'
       }),
       bodyClassName: css({
         height: '150px',
         border: 'none',
         backgroundColor: '#EFEBE9'
       })
     }
     toast.info(<Msg func={toast.dismiss}/>, options)
  }

I checked and this function is only called once, so it should render only one toast.
I hope you can help me,
Thanks

[fkhadra]

Hey @gabrielHosino,

Could you help me to reproduce the issue here:

I replaced Fragment by div cause codesandbox is running react 16 not 16.2

[gabrielHosino]

Hey, so sorry. I didnt pay attention to the fact that I had two toast containers. That was the problem! Thanks, seeing your code working made me realize the problem was somewhere else!