Rerendering component on onChange causes default value to appear

If I have the following select component:

<Select onChange={this.handleChange}
    ref="inputName"
    name="inputName"
    options={inputOptions}
    value="Please select one of the following:"/>

And I define the following onChange event:

handleChange: function (value) {
    this._someStateValue = value === 'new';
    this.forceUpdate();
},

or, for that matter, this:

handleChange: function (value) {
    var someStateValue = value === 'new';
    this.setState({_someStateValue: someStateValue});
},

Note that both of these approaches causes a component re-render.

Then, whenever I change the Select, triggering the onChange event, which in turn causes the component to re-render, the default value is displayed and not the value in the select options that I have just selected. Subsequently re-selecting the desired select option will then display it, most likely because react does a diff check on the state of the component and does not trigger a re-render (my best guess).

[andrewhl]

I found a workaround: making the value of the Select a function that checks the state of the component, and the onChange another function that updates the state to whatever value is passed along. I don’t love this, but it seems to be working. Mind you, I’ve only tested with a limited use case; I can’t yet confirm that it resolved the original issue I posted. I will test against my issue when I get a chance.

<Select onChange={this.updateValue} value={this.getValue()} />

...

updateValue: function(value) {
    this.setState({value: value});
},
getValue: function() {
    if (!this.state.value) {
        return 'Some default text';
    }
    return this.state.value;
}

[jossmac]

Version 1 of react-select is no longer supported.

In the best interest of the community we’ve decided to spend the time we have available on the latest version.

We apologise for any inconvenience.

Please see:

1. v1 to v2 upgrade guide
2. v1 documentation and examples