title: Snackbar error message within if statement
body: <p>I have an if statement that errors out if a user selects a file format that is not valid, however, it is currently done within js as an alert, I would like to change this to Material UI's <code>snackbar</code> error message. However I am having trouble doing so, the code below.</p>
  
  <pre><code>let file = document.getElementById("file-upload");
  const onSelectFile = e =&gt; {
    setFieldValue(e.target.name, e.target.files[0]);
    setFieldTouched(e.target.name, true, false);
    let fileName = file.value;
    if (
      fileRestrict.findIndex(item =&gt; fileName.toLowerCase().endsWith(item)) &gt;= 0
    ) {
      //TODO
    } else {
      {
        LongTextSnackbar;
      }
      file.value = "";
    }
  };
  
  function LongTextSnackbar() {
    return (
      &lt;div className={classes.root}&gt;
        &lt;SnackbarContent
          className={classes.snackbar}
          message={"error error error"}
        /&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>I have tried to imitate Mat UI's `snackbar, but to no avail, inside the else, I need to call another component of material UI's somehow, any suggestions on how I could do this? </p>