title: React Component - debounce
body: <p>Trying to create a delay on react component that has input field that updates on change</p>
  
  <p>Here is my onChange method </p>
  
  <pre><code>handleOrderQtyKeyPress (e) {
      var regex = /[^0-9]/
      if (e.key.match(regex)) {
          e.preventDefault();
      }
      if (this.state.orderQtyValue.toString().length == 3) {
          e.preventDefault();
      }
  }
  </code></pre>
  
  <p>and the <a href="https://react-bootstrap.github.io/components.html#forms" rel="nofollow noreferrer">react-bootstrap</a> component:</p>
  
  <pre><code> &lt;FormControl
     type='number'
     min='0'
     value={this.state.orderQtyValue}
     onChange={this.handleOrderQtyChange}
     onKeyPress={this.handleOrderQtyKeyPress}
     style={styles.orderQtyValue}
    /&gt;
  </code></pre>
  
  <p>so I tried importing lodash _.debounce and applying at the constructor</p>
  
  <pre><code>import debounce from 'lodash/debounce';
  
  
  this.handleOrderQtyKeyPress = _.debounce(this.handleOrderQtyKeyPress.bind(this),1000);
  </code></pre>
  
  <p>I am not getting a debounce.  What am I missing here? </p>