Как в react-select передать массив для свойства isOptionDisabled?

Question

[angelzzz]

Пытаюсь в react-select передать массив объектов, по которым можно отфильтровать опции селекта и сделать их недоступными (disabled). В документации рассматривается только вариант, когда выбрать опции селекта можно по ключу/свойству или по одному.

class App extends Component {
  //функция фильтрации
  isOptionDisabled(arr) {
    console.log("arr", arr);
    arr.forEach((val, i, dis) => {
      return option => {
        console.log("option", option, dis); //не выводит в консоль
        return option.value !== val;
      };
    });
  }

  render() {
    //массив всех объектов для опций
    const options = [
      { value: "chocolate", label: "Chocolate" },
      { value: "strawberry", label: "Strawberry" },
      { value: "vanilla", label: "Vanilla" }
    ];

    //массив для фильтрации
    const disOptions = [
      { value: "chocolate", label: "Chocolate" },
      { value: "strawberry", label: "Strawberry" }
    ];

    return (
      <Select
        options={options}
        isOptionDisabled={this.isOptionDisabled(disOptions)}
      />
    );
  }
}

Рабочий сендбокс

Как это можно реализовать?

Answer 1

[0xD34F]

Не надо никаких массивов никуда передавать. Можно указать свойство isDisabled:

class App extends Component {
  state = {
    options: [
      { value: "chocolate", label: "Chocolate" },
      { value: "strawberry", label: "Strawberry", isDisabled: true },
      { value: "vanilla", label: "Vanilla" },
    ],
  }

  render() {
    return (
      <Select
        options={this.state.options}
      />
    );
  }
}

Но если кровь из носу нужен отдельный массив и метод для проверки, то можно как-нибудь так, например:

class App extends Component {
  state = {
    options: [
      { value: "chocolate", label: "Chocolate" },
      { value: "strawberry", label: "Strawberry" },
      { value: "vanilla", label: "Vanilla" }
    ],
    disabled: [ 'chocolate', 'vanilla' ],
  }

  isOptionDisabled = option => this.state.disabled.includes(option.value)

  render() {
    return (
      <Select
        options={this.state.options}
        isOptionDisabled={this.isOptionDisabled}
      />
    );
  }
}

Answer 2

[Антон Спирин]

Вы должны передавать в isOptionDisabled функцию, которая принимает первым аргументом опцию и возвращает Boolean.

createIsOptionDisabled = disOptions => option =>
  disOptions.some(({ value }) => value === option.value);

return (
  <Select
    options={options}
    isOptionDisabled={this.createIsOptionDisabled(disOptions)}
  />
);