Set value/label in react-select 2

Programming
, ,
1

Setting Value in a React-Select 2 Form

I am trying to update some data fetched from a server in a React-Select 2 form. The value changes when I select an option, but the label does not.

I have attempted the following solution:

handleSelectChange(selectedOption){
 this.setState({ selectedOption });
}

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

]

<Select
   options={options}
   onChange={(selectedOption)=>this.handleSelectChange(selectedOption)}
   autoFocus={true}
   value={options.find(option => option.value === data.valueTyppe)}

/>

However, this does not seem to work.

2

Change the value prop in the <Select> component to match the selectedOption state value:

<Select
   options={options}
   onChange={(selectedOption)=>this.handleSelectChange(selectedOption)}
   autoFocus={true}
   value={this.state.selectedOption} // Change this line
/>