key prop to ensure independent treatment

src/components/Tutorial/Builder/Builder.js

@@ -37,6 +37,7 @@ class Builder extends Component {
       content: '',
       string: false,
       snackbar: false,
+      key: '',
       message: ''
     };
     this.inputRef = React.createRef();
@@ -49,7 +50,7 @@ class Builder extends Component {
   submit = () => {
     var isError = this.props.checkError();
     if(isError){
-      this.setState({ snackbar: true, message: `Die Angaben für das Tutorial sind nicht vollständig.`, type: 'error'});
+      this.setState({ snackbar: true, key: Date.now(), message: `Die Angaben für das Tutorial sind nicht vollständig.`, type: 'error'});
       window.scrollTo(0, 0);
     }
     else{
@@ -65,7 +66,7 @@ class Builder extends Component {
 
   reset = () => {
     this.props.resetTutorial();
-    this.setState({ snackbar: true, message: `Das Tutorial wurde erfolgreich zurückgesetzt.`, type: 'success'});
+    this.setState({ snackbar: true, key: Date.now(), message: `Das Tutorial wurde erfolgreich zurückgesetzt.`, type: 'success'});
     window.scrollTo(0, 0);
   }
 
@@ -95,7 +96,7 @@ class Builder extends Component {
         result.steps = [{}];
       }
       this.props.readJSON(result);
-      this.setState({ snackbar: true, message: `${isFile ? 'Die übergebene JSON-Datei' : 'Der übergebene JSON-String'} wurde erfolgreich übernommen.`, type: 'success'});
+      this.setState({ snackbar: true, key: Date.now(), message: `${isFile ? 'Die übergebene JSON-Datei' : 'Der übergebene JSON-String'} wurde erfolgreich übernommen.`, type: 'success'});
     } catch(err){
       console.log(err);
       this.props.progress(false);
@@ -115,10 +116,6 @@ class Builder extends Component {
     this.setState({ open: !this.state });
   }
 
-  toggleSnackbar = () => {
-    this.setState({ snackbar: !this.state, message: '', type: null });
-  }
-
 
   render() {
     return (
@@ -185,9 +182,9 @@ class Builder extends Component {
 
         <Snackbar
           open={this.state.snackbar}
-          onClose={this.toggleSnackbar}
           message={this.state.message}
           type={this.state.type}
+          key={this.state.key}
         />
 
       </div>