title: Why is this request cancel not working in axios?
body: <p>I am trying to cancel the request when the input in my search field is empty so the results don't show after the input is deleted.</p>
  
  <p>I tried not to use cancel request and it works, the only problem is that I delete characters too fast the results don't dissapear.
  Declared this outside component: </p>
  
  <pre><code>const source = axios.CancelToken.source();
  </code></pre>
  
  <p>Also tried declaring it inside the handler same result.</p>
  
  <p>This is the state :</p>
  
  <pre><code>state = {
          results: null
      }
  </code></pre>
  
  <p>And the function triggered on change</p>
  
  <pre><code>findGames = (event) =&gt; { //Cancel request when empty event.target.value missing
          let searchText = event.target.value;
          source.cancel('Request Canceled');
          if (event.target.value !== "") {
              let body = {
                  "search_text": `${searchText}`, "fields": ["id", "name", "release_dates"]
              }
  
              axios.post(getGameIDUrl, body, headers,{cancelToken: source.token})
                  .then(res =&gt; res.data.filter((result) =&gt; { return result.type === "game" }))
                  .then(res =&gt; this.setState({ results: res }))
                  .catch(err =&gt; {
                      if(axios.isCancel(err)) {
                          console.log('Request Canceled')
                      }
                  })
          } else {
              this.setState({results: null})
          }
  
      }
  </code></pre>
  
  <p>This is how I trigger the function: </p>
  
  <pre><code>&lt;StyledInput type="text" onChange={this.findGames} /&gt;
  </code></pre>
  
  <p>Then I just display the results: </p>
  
  <pre><code>{this.state.results}
  </code></pre>