React-select: The State change is not changing the value. It still displays Select.

[sourabh635]

<Select name="select-value" value={this.state.someValue} onChange={this.updateSomeValue.bind(this)} options={someValueList} onSelectResetsInput={true} clearable={false} searchable={true} />
when the value it selected it doesn't update the value but the state is being changed. As it works in some components and dosen't work at other other components.

[divmgl]

We need more code to identify where the problem is. In particular, we need to know the state of someValueList and this.state.someValue.

If you want the Select component to update correctly without the labelKey and valueKey properties, your options will need to include a label and value property.

If you don't want to make a new object for your options, you need to include labelKey and a valueKey which represents what selected value. Your value must match the value in the object in order for it to display correctly. The labelKey must also be included so that the Select understands what to display in its selected item.

[shammond42]

I am seeing this too. This code

        <Select
          name='form-field-name'
          value='two'
          onChange={this.handleSelectChange}
          options={[
            { value: 'one', label: 'One' },
            { value: 'two', label: 'Two' },
          ]}
        />

Renders like this (Ignore the drive input).

However, this code seems to work.

      <Select
          name='form-field-name'
          value={{value: 'one', label: 'One'}}
          onChange={this.handleSelectChange}
          options={[
            { value: 'one', label: 'One' },
            { value: 'two', label: 'Two' },
          ]}
        />

[sourabh635]

@divmgl Thanks for the suggestion i will test it.

[jessecano]

I am seeing this too. This code

        <Select
          name='form-field-name'
          value='two'
          onChange={this.handleSelectChange}
          options={[
            { value: 'one', label: 'One' },
            { value: 'two', label: 'Two' },
          ]}
        />

Renders like this (Ignore the drive input).

However, this code seems to work.

      <Select
          name='form-field-name'
          value={{value: 'one', label: 'One'}}
          onChange={this.handleSelectChange}
          options={[
            { value: 'one', label: 'One' },
            { value: 'two', label: 'Two' },
          ]}
        />

@shammond42 This worked awesomely!!!