title: How to use Autosuggest in Material UI
body: <p>I am trying to use autosuggest in Material UI. I set my own data in the componentDidMount method. 
  Is there a correct or better way to set the data rather than passing in as props and setting in the suggestions array?</p>
  
  <p>Calling the component:</p>
  
  <pre><code>&lt;IntegrationAutosuggest  placeHolder="Search the data " data={this.state.options} onSelect={this.handleSuggestionSelected}/&gt;
  </code></pre>
  
  <p>I am using the react-autosuggest example from <a href="https://material-ui.com/demos/autocomplete/" rel="nofollow noreferrer">https://material-ui.com/demos/autocomplete/</a> but added componentDidMount method.</p>
  
  <pre><code> let suggestions = [];
  //     { label: 'Afghanistan' },
  //     { label: 'Aland Islands' },
  //     { label: 'Brunei Darussalam' },
  // ];
  
  function renderInputComponent(inputProps) {
      const { classes, inputRef = () =&gt; {}, ref, ...other } = inputProps;
  
      return (
          &lt;TextField
              className={classes.textField}
              fullWidth
              variant="outlined"
              InputProps={{
                  inputRef: node =&gt; {
                      ref(node);
                      inputRef(node);
                  },
                  classes: {
                      input: classes.input,
                  },
              }}
              {...other}
          /&gt;
      );
  }
  
  function renderSuggestion(suggestion, { query, isHighlighted }) {
      const matches = match(suggestion.label, query);
      const parts = parse(suggestion.label, matches);
  
      return (
          &lt;MenuItem selected={isHighlighted} component="div"&gt;
              &lt;div&gt;
                  {parts.map((part, index) =&gt;
                          part.highlight ? (
                              &lt;span key={String(index)} style={{ fontWeight: 500 }}&gt;
                {part.text}
              &lt;/span&gt;
                          ) : (
                              &lt;strong key={String(index)} style={{ fontWeight: 300 }}&gt;
                                  {part.text}
                              &lt;/strong&gt;
                          ),
                  )}
              &lt;/div&gt;
          &lt;/MenuItem&gt;
      );
  }
  
  function initSuggestions(value) {
      suggestions = value;
  }
  
  function getSuggestions(value) {
      const inputValue = deburr(value.trim()).toLowerCase();
      const inputLength = inputValue.length;
      let count = 0;
  
      return inputLength === 0
          ? []
          : suggestions.filter(suggestion =&gt; {
              //console.log('suggestion is:'+suggestion.label);
              //console.log(!suggestion.label);
  
              const keep =
                  count &lt; 5 &amp;&amp; suggestion.label &amp;&amp; suggestion.label.slice(0, inputLength).toLowerCase() === inputValue;
  
              if (keep) {
                  count += 1;
              }
  
              return keep;
          });
  }
  
  function getSuggestionValue(suggestion) {
      return suggestion.label;
  }
  
  function onSuggestionSelected(event, { suggestion, suggestionValue, suggestionIndex, sectionIndex, method }) {
      console.log('HandleSuggestion() '+suggestionValue);
  }
  
  const styles = theme =&gt; ({
      root: {
          height: 50,
          flexGrow: 1,
      },
      container: {
          position: 'relative',
      },
      suggestionsContainerOpen: {
          position: 'absolute',
          zIndex: 998,
          marginTop: theme.spacing.unit,
          left: 0,
          right: 0,
      },
      suggestion: {
          display: 'block',
      },
      suggestionsList: {
          margin: 0,
          padding: 0,
          listStyleType: 'none',
      },
      divider: {
          height: theme.spacing.unit * 2,
      },
  });
  
  class IntegrationAutosuggest extends React.Component {
      state = {
          single: '',
          popper: '',
          suggestions: [],
      };
  
      componentDidMount() {
          initSuggestions(this.props.data);
      }
  
      handleSuggestionsFetchRequested = ({ value }) =&gt; {
  
  
          this.setState({
              suggestions: getSuggestions(value),
          });
      };
  
      // handleSuggestionSelected = (event, { suggestion, suggestionValue, suggestionIndex, sectionIndex, method }) =&gt; {
      //     console.log(suggestionValue + ' Selected!');
      // };
  
      handleSuggestionsClearRequested = () =&gt; {
          this.setState({
              suggestions: [],
          });
      };
  
      handleChange = name =&gt; (event, { newValue }) =&gt; {
          this.setState({
              [name]: newValue,
          });
      };
  
      render() {
          const { classes } = this.props;
          console.log('Re-render!!');
          console.log(this.props);
          console.log(this.state.suggestions);
  
          const autosuggestProps = {
              renderInputComponent,
              suggestions: this.state.suggestions,
              onSuggestionsFetchRequested: this.handleSuggestionsFetchRequested,
              onSuggestionsClearRequested: this.handleSuggestionsClearRequested,
              onSuggestionSelected: this.props.onSelect,
              getSuggestionValue,
              renderSuggestion,
          };
  
          return (
              &lt;div className={classes.root}&gt;
                  &lt;Autosuggest
                      {...autosuggestProps}
                      inputProps={{
                          classes,
                          placeholder: this.props.placeHolder,
                          value: this.state.single,
                          onChange: this.handleChange('single'),
                      }}
                      theme={{
                          container: classes.container,
                          suggestionsContainerOpen: classes.suggestionsContainerOpen,
                          suggestionsList: classes.suggestionsList,
                          suggestion: classes.suggestion,
                      }}
                      renderSuggestionsContainer={options =&gt; (
                          &lt;Paper {...options.containerProps} square&gt;
                              {options.children}
                          &lt;/Paper&gt;
                      )}
                  /&gt;
                  &lt;div className={classes.divider} /&gt;
  
  
              &lt;/div&gt;
          );
      }
  }
  
  IntegrationAutosuggest.propTypes = {
      classes: PropTypes.object.isRequired,
  
  };
  
  export default withStyles(styles)(IntegrationAutosuggest);
  </code></pre>