title: Fetch request inside function. How to put it in ComponentDidMount?
body: <p>As you can see, my handleSearchRequest function is calling an API , which is later called by an onClick event inside the IconButton tag.</p>
  
  <p>How do I load the API inside ComponentWillMount, the way I can still write stuff on HandleSearchRequest like setState or something so Onclick can still call this function ?</p>
  
  <pre><code>class Searcher extends React.Component {
    constructor(props){
      super(props);
      this.state = {
        query: '',
        application: null
      }
  
    }
  
    // componentDidMount () {
    //
    //
    //
    // }
  
    handleSearchRequest() {
      console.log('this.state', this.state);
      const BASE_URL = 'https://itunes.apple.com/search?term';
      const FETCH_URL = BASE_URL + '=' + this.state.query;
      console.log('FETCH_URL', FETCH_URL);
  
      fetch(FETCH_URL, {
        method: 'GET'
      })
  
        .then(response =&gt; response.json())
          .then(json =&gt; {
            const application = json.results[0];
            this.setState({application})
            console.log({application})
          });
    }
  
    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;
          {
            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>this is the ResultItem component</p>
  
  <pre><code>class ResultItem extends Component {
  
  componentDidMount () {
  
  }
    render () {
      // console.log ('myProps', this.props);
  
      let application = {
        artistName: '',
        country: '',
        primaryGenreName: '',
        trackName: ''
      };
  
      if (this.props.application !== null) {
        application = this.props.application
      }
  
      return (
        &lt;div&gt;
  
          &lt;Card style={{width:'30%'}}&gt;
            &lt;CardMedia&gt;
              &lt;div style={styles.appCard}/&gt;
            &lt;/CardMedia&gt;
            &lt;FloatingActionButton
              style={styles.addButton}
              backgroundColor={'#CC0000'}
              &gt;
              &lt;ContentAdd /&gt;
            &lt;/FloatingActionButton&gt;
            &lt;CardTitle
              title={application.artistName}
                       subtitle="Application" /&gt;
            &lt;CardText&gt;
              &lt;div&gt;
                &lt;div&gt;Name:   &lt;b&gt;{application.artistName}      &lt;/b&gt; &lt;/div&gt;
                &lt;div&gt;Country:&lt;b&gt;{application.country}         &lt;/b&gt; &lt;/div&gt;
                &lt;div&gt;Genre:  &lt;b&gt;{application.primaryGenreName}&lt;/b&gt; &lt;/div&gt;
                &lt;div&gt;Song:   &lt;b&gt;{application.trackName}       &lt;/b&gt; &lt;/div&gt;
              &lt;/div&gt;
            &lt;/CardText&gt;
          &lt;/Card&gt;
      &lt;/div&gt;
      );
    }
  }
  
  export default ResultItem; 
  </code></pre>