react-select - setState not working

Question

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.

The relevant part of this is the handleNewOption() function

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);
    }
  });
}

the part that is not working is the self.setState(); . I have tried (what I have above) in addition to self.setState(state) , self.setState({state}) and too many other combinations I can't even remember.

What doesn't make sense to me, is in my handleOnChange() , which looks like

handleOnChange(value) {
  this.setState({value});
}

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 handleNewOption(option) but it didn't work.

EDIT: In an effort to help, here is my full component

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 < 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 (
        <Select.AsyncCreatable
          multi={false}
          loadOptions={this.getCompanies}
          onChange={this.handleOnChange}
          onNewOptionClick={this.handleNewOption}
          value={value}
          promptTextCreator={(input) => {return ('Add "' + input + '"')}}
          placeholder={this.props.placeholder}
        />
      );
    }
});

module.exports = CompanySelect;

Does anyone see why the setState() in the handleNewOption() doesn't work? I can also post more of my react component if that would help.

Answer 1

Try to change state like this

success: function(data) {
  self.setState({ value: data.company });
},

assuming your data is in fact object with attributes value and label.

In your handleOnChange you are passing value object to state, but in your handleNewOption you are passing you are passing value string and label string to state and there you have your mismatch.