title: Consecutive Material-UI Snackbars (with React-Redux)
body: <p>Instead of having many snackbars scattered throughout many components I refactored my app to have one single custom component that gets called with Redux to display any variation of a snackbar that it needs to.</p>
  <p><strong>Expected behaviour:</strong></p>
  <p>When a call to show a second snackbar is made, the current snack bar animates out smoothly and the new one animates in, like in the <a href="https://material-ui.com/components/snackbars/#consecutive-snackbars" rel="nofollow noreferrer">Material-UI official example</a>.</p>
  <p><strong>Current behaviour:</strong></p>
  <p>Currently if a snackbar is called while another is open it just replaces the content of the existing snackbar. Because no new snackbar is made this can easily result in the new snack message disappearing a moment later, not giving the user time to read the new message.</p>
  <p><a href="https://codesandbox.io/s/consecutive-material-ui-snackbars-ovmzj?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit Consecutive Material-UI Snackbars" /></a></p>
  <p>I tried copying the code from the official MUI example linked above and got close, but couldn't get it to work perfectly smoothly. <code>MyAttempt.jsx</code> is this attempt. <code>Demo.jsx</code> is the code before this attempt, and displays the current behaviour described above.</p>