React Material-UI Cookbook

How to do it...

Let's say that you have several components throughout your application that need to send snackbar messages to your users. Having to manually render Snackbar components everywhere would be cumbersome—especially if all you're trying to do is display simple text snackbars.

One alternative approach is to implement a higher-order component that wraps your components with the ability to display messages by calling a function and then passing the text as the argument. Then, you can wrap any components that need the snackbar capability. Here's what the code looks like:

import React, { Fragment, useState } from 'react';import Snackbar from '@material-ui/core/Snackbar';import Button from '@material-ui/core/Button';import IconButton ...