React-select component value not updating. React-select component value not updating. reactjs reactjs

React-select component value not updating.


Your main issue is your handleChange method doesn't set the value

handleChange = (event) => {  this.setState({    ...this.state,    value: event.target.value  })}

With a vanilla <select> component, the onChange event would have a DOMElement reference at event.target, and react provides the value prop on the DOM element do you can use it to update your state. You're 3rd-party <Select> component might have a different event signature or expectation.

Also, since I don't know what library you're using, I've provided the state key which tracks your value as "yourSelectKey", but you can replace this with the correct key. If it's a nested property (part of an object), you may have to add the spread operator so that the other values get copied over as well.

And you need to add the onChange event handler to your select component. I recommend you follow the react docs instead of using that library.

<select  value={this.state.value}  onChange={this.handleChange}>  name={this.state.name}>    <option value="value1">Value 1</option>    <option value="value2">Value 2</option>    <option value="value3">Value 3</option></select>

Other issues you're facing:

  • You need to bind handleChange to your object instance. You can either do this in the constructor with a line this.handleChange = this.handleChange.bind(this) or by declaring handleChange as an instance variable, as I have done above.
  • as the commenter said, you should avoid doing the fetch call in componentWillMount, but should use componentDidMount. This is a common mistake for beginners.