title: react-select - setState not working
body: <p>I am new to react. I am working on a rails + react project using react select. Right now, everything works but the option to add something new if it does not already exist.</p>
  
  <p>The relevant part of this is the <code>handleNewOption()</code> function</p>
  
  <pre><code>handleNewOption(option) {
    var self = this;
    $.ajax({
      url: '/url/',
      type: 'POST',
      dataType: 'json',
      data: { q: option.label },
      success: function(data) {
        var state = data.company;
        // state looks like {value: 1, label: "string"}
        self.setState({value: state.value, label: state.label});
      },
      error: function(xhr, status, error) {
        var response = JSON.parse(xhr.responseText);
        alert('Errors: ' + response.errors);
      }
    });
  }
  </code></pre>
  
  <p>the part that is not working is the <code>self.setState();</code>. I have tried (what I have above) in addition to <code>self.setState(state)</code>, <code>self.setState({state})</code> and too many other combinations I can't even remember. </p>
  
  <p>What doesn't make sense to me, is in my <code>handleOnChange()</code>, which looks like</p>
  
  <pre><code>handleOnChange(value) {
    this.setState({value});
  }
  </code></pre>
  
  <p>is this works fine and sets the value in the form if it already exists. i have tried to pass in the exact format in <code>handleNewOption(option)</code> but it didn't work.</p>
  
  <p><strong>EDIT:</strong> In an effort to help, here is my full component</p>
  
  <pre><code>var Select = require('react-select');
  
  var CompanySelect = React.createClass({
    getInitialState() {
      return {
        value: ''
      }
    },
    handleOnChange(value) {
      this.setState({value});
    },
    handleNewOption(option) {
      var self = this;
      $.ajax({
        url: '/url/',
        type: 'POST',
        dataType: 'json',
        data: {
          q: option.label
        },
        success: function(data) {
          var state = data.company;
          self.setState(state);
        },
        error: function(xhr, status, error) {
          var response = JSON.parse(xhr.responseText);
          alert('Errors: ' + response);
        }
      });
    },
    getCompanies(input, callback) {
      if (input.length &lt; 2) {
        return callback(null, {
          value: input
        });
      }
  
      $.ajax({
        url: '/url/search',
        type: 'GET',
        dataType: 'json',
        data: {
          q: input
        },
        success: function(data) {
          companies = data.companies.map(function(company) {
            return {
              value: company.id,
              label: company.name
            }
          });
          callback(null, {
            options: companies,
            complete: false
          });
        }
      });
    },
      render() {
        const { options, value } = this.state;
        return (
          &lt;Select.AsyncCreatable
            multi={false}
            loadOptions={this.getCompanies}
            onChange={this.handleOnChange}
            onNewOptionClick={this.handleNewOption}
            value={value}
            promptTextCreator={(input) =&gt; {return ('Add "' + input + '"')}}
            placeholder={this.props.placeholder}
          /&gt;
        );
      }
  });
  
  module.exports = CompanySelect;
  </code></pre>
  
  <p>Does anyone see why the <code>setState()</code> in the <code>handleNewOption()</code> doesn't work? I can also post more of my react component if that would help. </p>