newOptionCreator

I cannot for the life of me figure out how to make newOptionCreator work.

This is what I have so far:

const ContactSelect = React.createClass({
  handleChange(input) {
    this.props.onContactChange(input.value);
  },
  onNewOption(newOption) {
    return { value: newOption.label, label: newOption.label };
  },
  render() {
    return (
      <Creatable
        name="contact-select"
        value={this.props.contact}
        resetValue={{ value: '' }}
        placeholder="Choose a contact (optional)..."
        options={this.props.contactOptions}
        onChange={this.handleChange}
        newOptionCreator={this.onNewOption}
      />
    );
  },
});

The new option does not get shown or selected. What am I missing here?

[andreme]

This is how it looks in the source, you might be missing the class?

https://github.com/JedWatson/react-select/blob/master/src/Creatable.js#L234

[tim-phillips]

@Geczy I’m so very sorry for the delay in getting back to you.

onContactChange() sets state in the parent component:

onContactChange(contact) {
  this.setState({ contact })
}

this.state.contact is then passed down to ContactSelect in the contact prop, which is why it is seen in my original post as this.props.contact.