title: React, Keep getting Cannot read property 'value' of undefined on Search Input
body: <p>Im trying to integrate the <strong>&lt; ChipInput /></strong> component from <a href="https://github.com/TeamWertarbyte/material-ui-chip-input" rel="nofollow noreferrer">https://github.com/TeamWertarbyte/material-ui-chip-input</a> I'm using material-UI react component and so far what I have is:</p>
  
  <p>A search input bar. When I type an artist it returns a result. so basically is working.</p>
  
  <p>Now, when I try to implement <strong>&lt; ChipInput /></strong> , following the instructions I get no results. (note IconButton and TextField are commented out as in Im trying to replace them with ChipInput)</p>
  
  <p>Therefore, if I type "aerosmith" I'll get:</p>
  
  <p><strong>FETCH_URL <a href="https://itunes.apple.com/search?term=&amp;limit=4" rel="nofollow noreferrer">https://itunes.apple.com/search?term=&amp;limit=4</a></strong> instead of</p>
  
  <p><strong>FETCH_URL <a href="https://itunes.apple.com/search?term=aerosmith&amp;limit=4" rel="nofollow noreferrer">https://itunes.apple.com/search?term=aerosmith&amp;limit=4</a></strong></p>
  
  <p>so , it's like is not taking my setState query for a reason. I tried componentWillReceiveProps but it didnt help. Any suggestions ?</p>
  
  <pre><code>class Searcher extends React.Component {
    constructor(props){
      super(props);
      this.state = {
        query: [],
        application: null,
      }
    }
  
    componentDidMount () {
      this.handleSearchRequest();
    }
  
  
  
    handleSearchRequest() {
      console.log('this.state', this.state);
  
      // we will replace BASE_URL with Anu's search api
      const BASE_URL = 'https://itunes.apple.com/search?';
  
      const FETCH_URL = BASE_URL + 'term=' + this.state.query + '&amp;limit=4';
  
      console.log('FETCH_URL', FETCH_URL);
  
      fetch(FETCH_URL, {
        method: 'GET'
      })
  
      // Initial test to see what the console response is after hiting the API
      // .then(response =&gt; console.log('response', response));
  
        .then(response =&gt; response.json())
          // const applications = response.data
          //   this.setState({applications})
  
      //testing the json results
          .then(json =&gt; {
            // console.log('json', json)
  
            const application = json.results[0];
            this.setState({application})
            console.log({application})
  
  
          });
    }
  
    handleChange(event) {
      this.setState({ query: event.target.value})
    }
  
  
    render () {
  
      return (
        &lt;div style={{position: 'relative'}}&gt;
  
             {/* &lt;IconButton
               iconStyle={styles.smallIcon}
               style={styles.iconButton}
               onClick={() =&gt; this.handleSearchRequest()}
             &gt;
                  &lt;Search color={black} /&gt;
  
             &lt;/IconButton&gt;
  
            &lt;TextField
              underlineShow={false}
              id="searchId"
              value={this.state.query}
              fullWidth={true}
              style={styles.textField}
              inputStyle={styles.inputStyle}
              hintStyle={styles.hintStyle}
              onChange={event =&gt; {this.setState({ query: event.target.value}) }}
              onKeyPress={event =&gt; {
                if (event.key === 'Enter') {
                  this.handleSearchRequest()
                }
              }}
            /&gt; */}
  
          &lt;br/&gt;
          &lt;br/&gt;
  
          &lt;ChipInput
            fullWidth={true}
            defaultValue={this.state.query}
            onChange={(event) =&gt; this.handleChange(event)}
          /&gt;
  
          {
            this.state.application != null
            ?
              &lt;ResultItem
                {...this.props} {...this.state}
                application={this.state.application}/&gt;
            : &lt;div&gt;&lt;/div&gt;
          }
        &lt;/div&gt;
  
      );
    }
  }
  
  export default Searcher;
  </code></pre>
  
  <p><strong>EDIT:</strong></p>
  
  <p>By the way, if I uncomment from <strong>&lt; IconButton /></strong> (line 110) til the end of <strong>&lt; TextField /></strong> (line 133) it does exactly what I want , but no chips ( with no ChipInput of course)</p>