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

Question

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;

Answer 1

The defaultValue props cannot be set dynamically, so you have to set it manually. And please note that the defaultValue should be an object containing the label and the actual value.

import ReactDOM from "react-dom";
import React, { useEffect, useState } from "react";
import Select from "react-select";

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

  useEffect(() => {
    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={{ label: "Mumbai", value: "Mumbai" }}
        options={cityOptions}
        onChange={onCitySelect}
      />
    </div>
  );
}

export default SelectMod;

const rootElement = document.getElementById("root");
ReactDOM.render(<SelectMod />, rootElement);

Or just set it as the default state value.

const [selectCity, setSelectCity] = useState({ label: "Mumbai", value: "Mumbai" });

--snips--

defaultValue={selectCity}

Answer 2

Please pass object "setSelectCity({ label: "Kolkata", value: "Kolkata" });"

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

const App = () => {

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

  useEffect(() => {
    setSelectCity({ label: "Kolkata", value: "Kolkata" });
    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);
    setSelectCity(e);
  };

  return (
    <div className="App">
      <h1>Hello MERN !!</h1>
      <Select
        value={selectCity}
        options={cityOptions}
        onChange={onCitySelect}
      />
    </div>
  );
}

export default App;