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

• 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

1 Answer 1

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: