Unable to get selected value from react-select AsyncSelect dropdown

user_7749135 0
Viewed 3053

Getting data from server successfully but while selecting option it's not getting selected & displayed in dropdown. And value is also not getting stored in selectedOption

import AsyncSelect from 'react-select/async';

const Register = (props) => {
  const [selectedOption, setSelectedOption]=useState("");

  const loadOptions = async (inputValue, callback) => {

      const response = await fetch('http://localhost:8080/api/user_location'+inputValue)
      const json = await response.json();
      callback(json.map(i=>({label:i.vdc+', '+i.district, value:i.vdc_id})));
  }

  const onChangeSelectedOption = (e) => {
    const selectedOption = e.target.value;
    setSelectedOption(selectedOption);
  };

  return (
         <AsyncSelect
           value={selectedOption}
           onChange={onChangeSelectedOption}                    
           loadOptions={loadOptions}
           defaultOptions={false}
           placeholder="Your Place"
         />
 );
};

Thank You!

react-select react-hooks reactjs
1 Answers

onChange event returns selected object, not event object

const onChangeSelectedOption = (e) => {
    console.log(e); // <---- this will be selected object not event
    const selectedOption = e.value; // <--- you can get value from object directly
    setSelectedOption(selectedOption);
};

WORKING DEMO :

Edit react-codesandboxer-example

user_23494070
Related