Supporting toast feedback
Toasts (called Snackbar in MUI) can be used to show feedback to the user that doesn’t relate to a direct element on the page. Good usage of a toast is showing an error message if a request to the backend fails, as shown in Figure 4.5, or showing a success message after the user changes their password, as there is no direct confirmation via the page content. A bad usage would be to report that the entered email is invalid as, in this case, the email field should show an error.
Figure 4.5: An example of a toast error
To support toasts, we need to be able to add a toast from any component in the app and have that toast displayed. Crucially, if there are multiple toasts, they should be displayed one after another so that there is never more than one toast displayed. This is another React context use case, much like the authentication context added earlier. So, let’s start by adding the following toast context to frontend...
