I'm using react-select to present the user with a dropdown list of options. I would like it if a specific option is chosen, all other options will disappear.

For example, if the "ALL" option is selected, I would like all other options to disappear:

As far as I saw, react-select maintains the state of the non-selected options. Can this be controlled via some prop passed to the react-select ponent?

I'm using react-select to present the user with a dropdown list of options. I would like it if a specific option is chosen, all other options will disappear.

For example, if the "ALL" option is selected, I would like all other options to disappear:

As far as I saw, react-select maintains the state of the non-selected options. Can this be controlled via some prop passed to the react-select ponent?

• javascript
• html
• reactjs
• jsx
• react-select

Share Improve this question Follow edited Mar 19, 2020 at 15:00 keikai 15.2k1010 gold badges5555 silver badges7272 bronze badges asked Mar 10, 2020 at 11:18 omeromer 1,44255 gold badges2424 silver badges5353 bronze badges 2

• Yes, it can. And, any code you have achieved? – keikai Commented Mar 10, 2020 at 11:23
• @keikai Please write it down as an answer, possibly with some code, and I will accept it – omer Commented Mar 10, 2020 at 11:41

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You can write related processes in handler, if all is selected, change the option data to the item all only. If selection cleared, restore the original option data.

---

import React from "react";
import "./styles.css";
import Select from "react-select";

const data = [
  { value: "1", label: "1" },
  { value: "2", label: "2" },
  { value: "3", label: "3" },
  { value: "4", label: "all" }
];
export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedLabel: "",
      selectedLabelList: []
    };
  }
  singleHandler = e => {
    this.setState({ selectedLabel: e ? e.label : "" });
  };
  multiHandler = e => {
    this.setState({
      selectedLabelList: e && e.length > 0 ? e.map(x => x.label) : []
    });
  };
  render() {
    const { selectedLabel, selectedLabelList } = this.state;
    const subListWithAll = data.filter(x => x.label === "all");
    const singleOptions = selectedLabel === "all" ? subListWithAll : data;
    const multiOptions = selectedLabelList.includes("all")
      ? subListWithAll
      : data;
    return (
      <>
        <div>
          <Select
            id="single"
            isClearable={true}
            value={singleOptions.filter(x => x.label === selectedLabel)}
            options={singleOptions}
            onChange={this.singleHandler}
          />
        </div>
        <div>
          <Select
            id="multi"
            isMulti
            isClearable={true}
            value={multiOptions.filter(x =>
              selectedLabelList.includes(x.label)
            )}
            options={multiOptions}
            onChange={this.multiHandler}
          />
        </div>
      </>
    );
  }
}

Try it online: