How to make Snackbar open again? - reactjs

Question

I created a Snackbar component.
import React, { Component } from 'react';
import { Snackbar, IconButton } from '#material-ui/core';
import CloseIcon from '#material-ui/icons/Close';
interface AlertProps {
message: string;
}
interface AlertState {
open: boolean;
}
export default class Alert extends Component<AlertProps, AlertState> {
constructor(props: AlertProps) {
super(props);
this.state = {
open: true
};
this.handleClose = this.handleClose.bind(this);
}
handleClose(event: React.SyntheticEvent | React.MouseEvent, reason?: string) {
if (reason !== 'clickaway') {
this.setState({
open: false
});
}
}
render() {
return (
<Snackbar
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
open={this.state.open}
autoHideDuration={6000}
onClose={this.handleClose}
message={this.props.message}
action={
<IconButton
key="close"
color="inherit"
onClick={this.handleClose}
>
<CloseIcon />
</IconButton>
}
/>
)
}
}
I then programmatically add it to a render when an error is encountered while submitting a form.
let alert: ReactNode;
if (this.state.error) {
alert = <Alert message={this.state.error} />;
}
Problem is the Snackbar only opens the first time an error is encountered. If a user submits the same form twice, the Snackbar doesn’t open.
I know it’s because of this.state.open = false which is set by the onClose method, but how can I "reset" this state before the form is submitted again?

Answer 1

One way is you could change your approach a bit and always have Alert rendered, i.e.
<Alert message={this.state.error} open={this.state.open} onClose={()=>{this.setState({open:false})}}/>
Also move the open state variable from Alert's state to its parent. So in Alert use the open value from props always. Now, whenever open is changed in the parent, Alert will re render properly.