Reactjs mui popup

Admin 1
Viewed 582

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

material-ui reactjs
2 Answers

Try this hope it works

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

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 });
}
user_83389500
Related