title: How to combine Material-UI's snackbar and input components in react?
body: <p>I'm using <a href="https://material-ui.com" rel="nofollow noreferrer">Material-UI</a> components to build my website. I have a header component with a search field which uses mui <a href="https://material-ui.com/api/input-base/" rel="nofollow noreferrer">InputBase</a> under the hood. When user enters empty input (that is they don't enter anything and just click enter) I want to display a mui <a href="https://material-ui.com/api/snackbar/" rel="nofollow noreferrer">Snackbar</a> which will warn the user the no meaningful input was entered. </p>
  
  <p>I can't get the combination of the two components to work together. In addition because search field state doesn't really change when user enters nothing it doesn't reload so if user repeatedly presses Enter the snackbar won't appear. I use <code>this.forceUpdate();</code> but is there a more elegant way to implement such logic?</p>
  
  <p>This is my code:</p>
  
  <p>for the search input field:</p>
  
  <pre><code>import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  import InputBase from '@material-ui/core/InputBase';
  import { withStyles } from '@material-ui/core/styles';
  import { withRouter } from 'react-router-dom';
  import { connect } from 'react-redux';
  import { getAppInfo } from '../../actions/appActions.js';
  import constants from '../../constants.js';
  
  import { AppSearchBarInputStyles } from '../styles/Material-UI/muiStyles.js';
  import AppNotFound from './AppNotFound.js';
  
  class AppSearchBarInput extends Component {
    state = {
      appId: ''
    }
  
    onChange = e =&gt; {
      this.setState({ appId: e.target.value });
    }
  
    onKeyDown = e =&gt; {
      const { appId } = this.state;
  
      if (e.keyCode === constants.ENTER_KEY &amp;&amp; appId !== '') {
        this.props.getAppInfo({ appId });
        this.setState({
          appId: ''
        });
      }
      this.props.history.push('/app/appInfo');
      this.forceUpdate();
    }
  
    render() {
      const { classes } = this.props;
      const { appId } = this.state;
      console.log(`appId from AppSearchInput=${appId === ''}`);
  
      return (
        &lt;div&gt;
          &lt;InputBase
            placeholder="Search…"
            classes={{
              root: classes.inputRoot,
              input: classes.inputInput,
            }}
            onChange={this.onChange}
            onKeyDown={this.onKeyDown}
            value={this.state.appId} /&gt;
          { appId === '' ? &lt;AppNotFound message={constants.MESSAGES.APP_BLANK()}/&gt; : ''}
        &lt;/div&gt;
      )
    }
  }
  
  AppSearchBarInput.propTypes = {
    classes: PropTypes.object.isRequired
  }
  
  const AppSearchBarWithStyles = withStyles(AppSearchBarInputStyles)(AppSearchBarInput);
  const AppSearchBarWithStylesWithRouter = withRouter(AppSearchBarWithStyles);
  export default connect(null, { getAppInfo })(AppSearchBarWithStylesWithRouter);
  </code></pre>
  
  <p>for the snackbar:</p>
  
  <pre><code>import React from 'react';
  import Snackbar from '@material-ui/core/Snackbar';
  import constants from '../../constants.js';
  import SnackbarMessage from './SnackbarMessage.js';
  
  
  class AppNotFound extends React.Component {
    state = {
      open: true,
    };
  
    handleClose = event =&gt; {
      this.setState({ open: false });
    };
  
    render() {
      const { message } = this.props;
      return (
        &lt;Snackbar
          anchorOrigin={{
            vertical: 'top',
            horizontal: 'center',
          }}
          open={this.state.open}
          autoHideDuration={6000}
          onClose={this.handleClose}
        &gt;
          &lt;SnackbarMessage
            onClose={this.handleClose}
            variant="warning"
            message={message}
          /&gt;
        &lt;/Snackbar&gt;
      );
    }
  }
  
  export default AppNotFound;
  </code></pre>