Reactjs mui popup-CodePudding

After successful removing the student, a popup notification will appear and it works great. but when i click the close button on popup notification another popup appear, and i want to disable that how can i prevent that?

  const [openAlertDismissStudent, setOpenAlertDismissStudent] = useState({
    open: false,
    success: false,
  });

setOpenAlertDismissStudent({
  open: true,
  success: true,
})

  const handleDismiss = () =>{
    setOpenAlertDismissStudent({
      open: true,
      success: false,
    })
    if(openAlertDismissStudent.success) {
      setOpenAlertDismissStudent({
        open: false,
        success: false,
      });
    }
  }

  <AlertNotification
    open={openAlertDismissStudent.open}
    handleClose={handleDismiss}
    success={openAlertDismissStudent.success}
  />

popup notification code

const AlertNotification = ({ open, handleClose, success }) => {
  const classes = useStyles();
  return (
    <Snackbar
      anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
      open={open}
      autoHideDuration={6000}
      onClose={() => handleClose(false, false)}
      message={
        <div>
          <span className={classes.highlight}></span>
          <Stack
            direction={'row'}
            spacing={1}
            justifyContent={'flex-start'}
            alignItems={'start'}
          >
            {success ? (
              <div>
                <p>Student Removed</p>
                <p>
                  A student was successfully removed. <u>View student lists</u>
                </p>
              </div>
            ) : (
              <div>
                <p>A Student was not successfully dismissed.</p>
              </div>
            )}
            <div></div>
          </Stack>
        </div>
      }
      action={
        <IconButton onClick={() => handleClose(false, false)}>
          <ClearIcon />
        </IconButton>
      }
      className={classes.alert}
    />
  );
};

dont read this line of code, dont read this line of code dont read this line of codedont read this line of code, dont read this line of code dont read this line of codedont read this line of code, dont read this line of code dont read this line of code

CodePudding user response：

Try this hope it works

const handleDismiss = () =>{
    setOpenAlertDismissStudent({
      open: false,
      success: false,
    })
    if(openAlertDismissStudent.success) {
      setOpenAlertDismissStudent({
        open: false,
        success: false,
      });
    }
  }

CodePudding user response：

you are setting open true onDissmiss. I think you just need to close the modal onDismiss nothing else. and.. what success means? its looks similar to "open" variable maybe you need to review when to update that part isolated.

const handleDismiss = () =>{
  setOpenAlertDismissStudent(prevState => { ...prevState, open: false });
}