Search code examples
reactjsreact-selectselectedvalue

Cannot get the selected value in React-select

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:

img1

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

Solution

  • 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>
  );
}