title: “Cannot read property 'props' of undefined” in the catch error function
body: <p>In the <code>fetch()</code> call below, when the URL is successfully fetched, <code>setAudio()</code> is successfully called but when an error is caught while fetching, I get:</p>
  
  <blockquote>
    <p>Uncaught (in promise) TypeError: Cannot read property 'handleSearch' of undefined</p>
  </blockquote>
  
  <pre><code>componentDidUpdate() {
    var audio = document.getElementById("audio");
    if (isNaN(audio.duration)) {
      if (this.props.keywords.length != 0) {
        if (audio.getAttribute("src") == "") {
          // Call to handleSearch() here is working fine.
          this.handleSearch(this.props.keywords[this.props.currentKey]);
        }
      }
    }
  }
  
  handleSearch = value =&gt; {
    fetch("URL" + value).then(res =&gt; res.json()).then(result =&gt; {
      // Some code
      this.props.setAudio({currentSourceId});
    }).catch(error =&gt; {
      // Some code
      this.handleSearch(this.props.keywords[this.props.currentKey]);
    });
  }
  </code></pre>
  
  <p>In the bundled <code>JS</code> file, I found:</p>
  
  <pre><code>n.handleSearch = function(e) {
    fetch("URL" + e).then(function(e) {
      return e.json()
    }).then(function(i) {
      // Some Code
      n.props.setAudio({currentSourceId: a})
    }).catch(function(e) {
      // Some Code
      this.handleSearch(this.props.keywords[this.props.currentKey])
    })
  }
  </code></pre>
  
  <p><code>n</code> is used to refer to <code>this</code> here, but inside catch, <code>this</code> it is still <code>this</code>. This is why I'm getting this error. Why is it still <code>this</code>?</p>