Default value is not selected with react-select (4.3.1) using React Hooks

I am trying to auto-selected a value from a list of data in the selected component. Kindly help. have already tried with the isLoading flag as well.

1. If the selected value is available in the list then auto selection
2. if value not available then no issue.

import React, {useEffect, useState} from 'react';
import Select from 'react-select';
import './App.css';

function App() {
  const [selectCity, setSelectCity] = useState(null);
  const [cityOptions, setCityOptions] = useState([]);

  useEffect(() => {
    setSelectCity("Mumbai");
    setCityOptions([{label: "Kolkata", value:"Kolkata"}, {label: "New Delhi", value:"New Delhi"}, {label: "Chennai", value:"Chennai"}, {label: "Mumbai", value:"Mumbai"}])
  }, []);

  const onCitySelect = (e) => {
    console.log("Selected: ", e);
  };
  return (
    <div className="App">
      <Select
        defaultValue={selectCity}
        options={cityOptions}
        onChange={onCitySelect}
        />
    </div>
  );
}

export default App;

[Rall3n]

Hello @ziaul-haque,

I hope you don’t mind that I edited your issue for better readability.

The defaultValue prop is designed for “uncontrolled” behaviour of components (read more about it here). Using it will only change the value for the initial render of the component. Changing a state using the useEffect hook is counted as being after the initial render of the component. You should instead use the value prop (in combination with the onChange prop to handle changes).

Also, the value of the two props value and defaultValue must have exactly the shape that an option in your options prop has (by default, an object consisting of the two properties value and label).

[alveshelio]

Hi,

I’m having the same issue and I’m not sure how to handle this. I need to set selected options with data from the backend, what would be the best way to set selected options programatically?

Thank you