how could i disable or remove alert component

Viewed 3396

How can disable the alert, I didn't find a boolean parameter for this in the documentation.

import React from 'react';
import Alert from '@material-ui/lab/Alert';

export default function SimpleAlerts() {
  const classes = useStyles();

  return (
    <div>
      <Alert severity="error">This is an error alert — check it out!</Alert>
    </div>
  );
}
2 Answers

Use conditional rendering:

import React from 'react';
import Alert from '@material-ui/lab/Alert';

export default function SimpleAlerts() {
  const classes = useStyles();

  return (
    <div>
      {someCondition && <Alert severity="error">This is an error alert — check it out!</Alert>}
    </div>
  );
}

You could wrap it in a <Snackbar> (doc)

const [open, setOpen] = React.useState(true)

const handleClick = () => {
  setOpen(!open)
}

return (
  <>
    <Button variant="outlined" onClick={handleClick}>
      Toggle
    </Button>
    <Snackbar open={open}>
      <Alert severity="success">This is a success message!</Alert>
    </Snackbar>
  </>
)

Codesanbox for demo

Edit Material demo (forked)

Related