title: Reactjs Select v2 - How to handle Ajax Typing?
body: <p>I am using <a href="https://deploy-preview-2289--react-select.netlify.com/home" rel="nofollow noreferrer">reactjs select 2</a>  but I don't know how to make it work so that when a user types something in a ajax request is made and the results are sent back. </p>
  
  <p>I see it has some async options but I don't get how it works and how I would get it to work with axios.</p>
  
  <p>I come up with this but it is kinda laggy when a user types(probably because it is re-rendering it after each type) and when the user selects a choice the value disappears.</p>
  
  <pre class="lang-js prettyprint-override"><code>export default class TestComponent extends Component {
    constructor(props) {
      super(props);
      this.state = {value: ""};
    }
  
    onInputChange(option) {
      this.getOptionsAsync(option)
  
  }
  getOptionsAsync(newInput) {
    var that = this;
    console.log("ffd", newInput)
    axios.get(`https://localhost:44343/api/States/GetStatesByText?text=${newInput}`)
      .then(function (response) {    
        var formatedResults = response.data.map((x)=&gt; {
          return {value: x.id, label: x.name}
        })
        that.setState({
            options: formatedResults,
            value: newInput
        })
      })
      .catch(function (error) {
  
      });   
  }
  
    render() {
      console.log(this.state.value, "value")
      return (
        &lt;div className="test"&gt;
        &lt;Select
          onInputChange={this.onInputChange.bind(this)}
          value={this.state.value}
          options={this.state.options }
        /&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>