How to get value from React Select Form-CodePudding

Sorry for just a basic question, But I'm a little stuck here to find any way to get values from React Select after making a selection.

This is a Simple Selection setup.

    const selectOptions = [
            { value: 'YES', label: 'Set to Active' },
            { value: 'NO', label: 'Set to Mute' }
       ]

    <Label className='form-label'>Select</Label>
         <Select
            isClearable={false}
            className='react-select'
            classNamePrefix='select'
            options={selectOptions}
            theme={selectThemeColors}
          />

I want to get the value against user-selected choice and put it into userChoice content using useState.

const [userChoice, setUserChoice] = useState("")

value can be YES or NO as defined in selectOptions. But how to pass this into userChoice. I tried using onChange={(e) => setUserChoice(e.target.value)} But this thing is not working.

Also tried onInputChange={handleInputChange} as suggested in previously asked threads on StackOverflow but not working here.

CodePudding user response：

The onChange callback handler gets called with the whole choice object instead of the event object. Therefore it should be like this.

 <Select
      ...
      ...
      onChange={(choice) => setUserChoice(choice)}
 />

If you only intested in YES / NO value, then use,

onChange={(choice) => setUserChoice(choice.value)}