autoHideDuration is not working in Snackbar @material-ui

Question

I have used Snackbar from Material-ui to display an alert. I want to hide that Snackbar automatically after 5 seconds but autoHideDuration is not working .

<Snackbar
  autoHideDuration={3000}
  open={true}
  ContentProps={{
    'aria-describedby': 'message-id',
  }}
  message={<span id="message-id"> Message </span>}
/>

See screenshot

Answer 1

You also have to implement the onClose method of the Snackbar component in order to make the timeout work.

Let's say the open status of the Snackbar is in your component state:

<Snackbar
  autoHideDuration={3000}
  open={this.state.open}
  ContentProps={{
    'aria-describedby': 'message-id',
  }}
  message={<span id="message-id"> Message </span>}
  onClose={() => this.setState({open: false})}
/>

Answer 2

if you use functional component you can use react hooks and make it easy.

const [open, setOpen] = useState(false);
const handleClose = (event, reason) => {
    if (reason === 'clickaway') {
      return;
    }
    setOpen(false);
};
    
<Snackbar autoHideDuration={6000} anchorOrigin={{ vertical: "top", horizontal: "right" }} open={open}  onClose={handleClose}>
   <Alert onClose={handleClose} severity="success>
      "Data Successfully Submitted"
   </Alert>
</Snackbar>