How do you incorporate an alert which will come out saying ADDED after clicking the save button from this form?

Question

Note This form is a floating form it closes enter image description here

Answer 1

I found a solution wherein I have used a SnackBar from Material UI. Here are the codes, this also applies to any button including Adding, Deleting, and Updating:

import { Snackbar } from "@material-ui/core";

const[opens, setOpens] = React.useState(false);

const handleClicking = () => {
    setOpens(true);
  };

  const handleCloses = (reason) => {
    if (reason === "clickaway") {
      return;
    }
    setOpens(false);
  };

<Button type="submit" onClick={() => {handleClose(); handleClicking();}} color="secondary">
                Save
</Button>

<Snackbar open={opens} autoHideDuration={6000} onClose={handleCloses}>
        <Alert onClose={handleCloses} severity="success">
          Added New Product!
        </Alert>
</Snackbar>

Note: The save button is inside a pop-up form when adding an item.