Programmatically select an option with react-select

Question

I have a basic understanding of React. I'm using react-select and I want to programmatically select an option. For example, with the code below, how to select option B on clicking the button?

This page mentions a setValue function, but I don't understand how to use it. I don't know what is a "ref" in React and how to use it, and I found similar questions on SO with answers assuming this knowledge.

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

const options = [
  { value: "A", label: "A" },
  { value: "B", label: "B" }
];

export default function App() {
  const [selectedOption, setSelectedOption] = useState("A");

  const handleChange = (value) => {
    setSelectedOption(value);    
  };

  return (
    <div className="App">
      <Select
        value={selectedOption}
        onChange={handleChange}
        options={options}
      />
      <button onClick={() => ????????}>Select B</button>
    </div>
  );
}

Sniper Dev · Accepted Answer · 2022-09-01 02:21:23Z

3

You can use the following code.

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

const options = [
  { value: "A", label: "A" },
  { value: "B", label: "B" }
];

export default function App() {
  const [selectedOption, setSelectedOption] = useState(options[0]);

  const handleChange = (value) => {
    setSelectedOption(value);    
  };

  return (
    <div className="App">
      <Select
        value={selectedOption}
        onChange={handleChange}
        options={options}
      />
      <button onClick={() => setSelectedOption(options[1])}>Select B</button>
    </div>
  );
}

React-Select is different with Select from Material UI. React-Select receives the object of options and set, display the value according to the object.

answered Sep 1, 2022 at 2:21

Sniper Dev

644 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Stéphane Laurent Over a year ago

Thanks. I finally figured it out thanks to this answer, similar to yours: stackoverflow.com/a/62054403/1100107 Do you know how to do with multiple selections? I just have to pass an array to the selected option?

Collectives™ on Stack Overflow

Programmatically select an option with react-select

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related