Cannot get the selected value in React-select

Question

I have a problem putting the selected value in the react select, I try to use this method defaultValue={{ label: 8, value: 8 }} , but it cannot work.

Below is my coding:

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

export default function App() {
  const [selectedOption, setSelectedOption] = useState("0");
  const options = [
    { value: "0", label: "0" },
    { value: "1", label: "1" },
    { value: "2", label: "2" },
    { value: "3", label: "3" },
    { value: "4", label: "4" },
    { value: "5", label: "5" },
    { value: "6", label: "6" },
    { value: "7", label: "7" },
    { value: "8", label: "8" },
    { value: "9", label: "9" },
    { value: "10", label: "10" },
    { value: "11", label: "11" },
    { value: "12", label: "12" }
  ];
  const handleTypeSelect = (e) => {
    setSelectedOption(e.value);
  };

  return (
    <div>
      <Select
        options={options}
        onChange={handleTypeSelect}        
        value={options.filter(function (option) {
          return option.value === selectedOption;
        })}
        defaultValue={{ label: 8, value: 8 }}
        label="Single select"
      />
    </div>
  );
}

Result:

May I know which parts I am getting wrong? I hope someone can guide me on how to solve this problem. Thanks.

Remarks: I don't want change to const [selectedOption, setSelectedOption] = useState("8");

Code testing place: https://codesandbox.io/s/musing-moon-z8x0bv?file=/src/App.js

Answer 1

You should be using find instead of filter

 value={options.find(function (option) {
          return option.value === selectedOption;
 })}

The find method returns the first value that matches from the collection. Once it matches the value in findings, it will not check the remaining values in the array collection. The filter method returns the matched values in an array from the collection.

In case of value option is computed as undefined then defaultValue will be picked by react-select. For that try setting the state as "" .

const [selectedOption, setSelectedOption] = useState("");

Full code from your sandbox:

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

export default function App() {
  const [selectedOption, setSelectedOption] = useState("");
  const options = [
    { value: "0", label: "0" },
    { value: "1", label: "1" },
    { value: "2", label: "2" },
    { value: "3", label: "3" },
    { value: "4", label: "4" },
    { value: "5", label: "5" },
    { value: "6", label: "6" },
    { value: "7", label: "7" },
    { value: "8", label: "8" },
    { value: "9", label: "9" },
    { value: "10", label: "10" },
    { value: "11", label: "11" },
    { value: "12", label: "12" }
  ];
  const handleTypeSelect = (e) => {
    setSelectedOption(e.value);
  };

  return (
    <div>
      <Select
        options={options}
        onChange={handleTypeSelect}
        value={options.find(function (option) {
          return option.value === selectedOption;
        })}
        defaultValue={{ label: "8", value: "8" }}
        label="Single select"
      />
    </div>
  );
}

Answer 2

Try this it works!

I just updated codesandbox :)

codesandbox link: https://codesandbox.io/s/stoic-jackson-l1bbii?file=/src/App.js

Answer 3

remove value property in Select because React select first consider value property in which you passed in usestate initial state "0" so it always gets 0.

if you want to default value work then simply remove value in select.

 <Select
        options={options}
        onChange={handleTypeSelect}
       // value={options.filter(function (option) {
       // return option.value === selectedOption;
       // })}
        defaultValue={{ value: "8", label: "8" }}
        label="Single select"
      />

Or other option is remove defaultValue and set value which you want to default select in the useState.

  const [selectedOption, setSelectedOption] = useState("8");
 <div>
      <Select
        options={options}
        onChange={handleTypeSelect}
        value={options.filter(function (option) {
          return option.value === selectedOption;
        })}
        label="Single select"
      />
 </div>