hide snackbar after 5 seconds

src/components/Snackbar.js

@@ -21,21 +21,49 @@ const styles = (theme) => ({
 
 class Snackbar extends Component {
 
+  constructor(props){
+    super(props);
+    this.state = {
+      open: props.open
+    };
+    this.timeout = null;
+  }
+
+  componentDidMount(){
+    if(this.state.open){
+      this.autoHideDuration();
+    }
+  }
+
+  componentWillUnmount(){
+    if(this.state.open){
+      clearTimeout(this.timeout);
+    }
+  }
+
+  onClose = () => {
+    this.setState({open: false});
+  }
+
+  autoHideDuration = () => {
+    this.timeout = setTimeout(() => {
+      this.onClose();
+    }, 5000);
+  }
+
   render() {
     return (
       <MaterialUISnackbar
         anchorOrigin={{vertical: 'bottom', horizontal: 'left' }}
-        open={this.props.open}
+        open={this.state.open}
-        onClose={this.props.onClose}
+        key={this.props.key}
-        key={Date.now()+this.props.message}
-        autoHideDuration={5000}
         style={{left: '22px', bottom: '40px', width: '300px', zIndex: '100'}}
       >
         <SnackbarContent
           style={{flexWrap: 'nowrap'}}
           className={this.props.type === 'error' ? this.props.classes.error : this.props.classes.success}
           action={
-            <IconButton onClick={this.props.onClose} style={{color: 'inherit'}}>
+            <IconButton onClick={this.onClose} style={{color: 'inherit'}}>
               <FontAwesomeIcon icon={faTimes} size="xs"/>
             </IconButton>
           }