How to make a filter in react-select using the value of another react-select

Question

I\'m creating a solution using a react-select and that a select should contain only the options it does not contain in the other. Ex

import React from \'reac         


        

Answer 1

The answer above from Laura breaks the filtering as you're writing a custom filterOption function (If you don't want your Select to be filterable then it's probably ok).

A simpler solution would be to just apply a simple filter on the options you pass through instead to the second Select instead.

const options = [
  { label: "foo", value: 1 },
  { label: "bar", value: 2 },
  { label: "bin", value: 3 }
];

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value1: false,
      value2: false
    };
  }

  onChange = option => {
    if (this.state.value2.value === option.value) {
      this.setState({
        value1: option,
        value2: false
      });
    } else {
      this.setState({ value1: option });
    }
  };

  onChange2 = option => {
    this.setState({ value2: option });
  };
  render() {
    return (
      <div className="App">
        <Select
          onChange={this.onChange}
          options={options}
          value={this.state.value1}
        />
        <Select
          onChange={this.onChange2}
          options={options.filter(
            option => option.value !== this.state.value1.value
          )}
          value={this.state.value2}
        />
      </div>
    );
  }
}

Working Example

Answer 2

To achieve your goal you need to store your select values in the state in order to compare it with the options in filterOption like the following example:

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value1: false,
      value2: false
    };
  }

  filterOption = ({ label, value, data }, string) => {
    if (this.state.value1 === data) {
      return false;
    } else if (string) {
      return label.includes(string) || value.toString().includes(string);
    } else {
      return true;
    }
  };

  onChange = option => {
    this.setState({ value1: option });
  };

  onChange2 = option => {
    this.setState({ value2: option });
  };
  render() {
    return (
      <div className="App">
        <Select
          onChange={this.onChange}
          options={options}
          value={this.state.value1}
        />
        <Select
          filterOption={this.filterOption}
          onChange={this.onChange2}
          options={options}
          value={this.state.value2}
        />
      </div>
    );
  }
}

Here a live example.