React Material-UI Cookbook

How to do it...

The open property is used to control the visibility of the snackbar. All you need in order to control this property value is a state value that's passed to it. Then, when this state changes, so does the visibility of the snackbar. Here's some code that illustrates the basic idea of state-controlling snackbars:

import React, { Fragment, useState } from 'react';import Button from '@material-ui/core/Button';import Snackbar from '@material-ui/core/Snackbar';export default function ControllingVisibilityWithState() {  const [open, setOpen] = useState(false);  const showSnackbar = () => {    setOpen(true);  };  return (    <Fragment>      <Button variant="contained" onClick={showSnackbar}>        Show Snackbar      </Button> <Snackbar open={open} message="Visible ...