React-select: Changing value does not update select label or hidden input

[johannesarnbro]

I've added react-select to my react/redux project. Everything works as expected, except that changing value does not change the label of the select. Also the value of the hidden input is not set.

react-select-bug.zip

[jooj123]

This isnt a bug, you need to change the value thats being supplied to Select - this can be done in your onChange handler

[oncletom]

Looks like a breaking change because it used to work differently in the past.

And to be honest, this is the kind of behaviour which is _native_ — and should probably be better to override in some rare cases. I looked for a while trying to figure out what was wrong.

[d4nyll]

Yes - what @jooj123 said - you need to do something like this:

export default class CurrencySelector extends Component {
    constructor(props) {
        super(props);

        this.state = {
            currency: DEFAULT_CURRENCY
        }
    }

    updateState(newCurrency) {
        this.setState({
            currency: newCurrency.value
        });
    }

    render() {
        return (
            <ReactSelect
                value={this.state.currency}
                onChange={this.updateState}>
            </ReactSelect>
        );
    }
}

But I do think this is not clear in the documentation. The document states that the value is the initial field value, which can lead people to think it behaves like the defaultValue prop of a 'normal' React element.

Maybe the documentation should be more explicit, because not everyone (have time to) studies the examples.

[romgrk]

Up. I think @d4nyll has a valid point about the documentation. I have been relying on it to use the component, and it is clearly misleading.

[leefsmp]

I'm here because I'm having trouble to display the selected value of a select control ... I love React! :'(

[okyere]

React-select is a controlled component. So you need to set the value prop with the a state of the component as illustrated by @d4nyll

[eugensunic]

This should have been in the docs at the front page on github. I spent an hour at night figuring out what is going on. I assumed that this was already built in but it wasn't, full working code for everyone:

import React from "react"
import Select from 'react-select';

export default class Header extends React.Component {
  constructor(props) {
     super(props);
     this.state = {value:"one"};
   }
  updateState(element) {
        this.setState({value: element});
      }
  render(){
  var Select = require('react-select'); //only for server-side
  var options = [
      { value: 'one', label: 'One' },
      { value: 'two', label: 'Two' }
  ];
    return(

      <Select
        name="form-field-name"
        value={this.state.value}
        options={options}
        onChange={this.updateState.bind(this)}
      />
   );
  }
}

[ghost]

Thank you @eugensunic so much!

@JedWatson please consider adding the above to the docs.

[sahan91]

This thread helped me too. I was using valueArray instead of value. Changing that worked for me

[q3e]

Having a label key in my options object helped fix this for me! Anybody understand why?

something like:

options = [{
   label: myDisplayedInputValue,
   ... otherKeys
}]

instead of { customKey: myDisplayedInputValue }

[mbandaNixon]

If you are using redux-form, make your select drop down is inside <form> </form>

class myclass extends Component {
render(){
return(
 <form onSubmit={this.props.handleSubmit}>
   <Field>
     <option> one </option>
   <option> Two  </option>
 </Field>
 </form>
)
}


const SelectingFences = reduxForm({
  form: 'form',
  enableReinitialize: true,
})(myclass)

export defaul SelectingFences;

[aprilmintacpineda]

I recently experienced this when debugging an existing code using react-select. I noticed that you actually need to provide an Object instead of a string as a value.

Example:

const options = [
  {
    label: 'Value 1',
    value: 1
  },
  {
    label: 'Value 2',
    value: 2
  },
  {
    label: 'Value 3',
    value: 3
  }
];

// ...others

<ReactSelect
  value={{
    value: 2,
    label: 'Value 2'
  }}
  options={options}
/>

[khushaldusseja]

@aprilmintacpineda : This is really helpful. Many thanks for sharing this answer!
cheers