[SOLVED] Correct way to use react-select-fast-filter-options

Correct way to use react-select-fast-filter-options

I'm using react-select-fast-filter-options and on searching anything, I'm not getting any result even if an entry is present against it in the select tag.

I already saw this question and I'm facing a very similar issue but I'm not passing any non-default property to react-virtualized-select.

My code is as follows:

import "react-select/dist/react-select.css";

import React from "react";
import ReactDOM from "react-dom";
import createFilterOptions from "react-select-fast-filter-options";
import Select from "react-select";
import faker from "faker";

// Dummy array of test values.
const options = Array.from(new Array(100), (_, index) => ({
  label: faker.lorem.sentence(),
  value: index
}));

export default class SelectComponent extends React.Component {
  render() {
    console.log(this.props.alloptions);
    return (
      <Select
        options={this.props.alloptions}
        filterOptions={createFilterOptions(this.props.alloptions)}
      />
    );
  }
}

ReactDOM.render(
  <SelectComponent alloptions={options} />,
  document.getElementById("root")
);

My guess is that the indexing of my data performed by react-select-fast-filter-options is done using some hidden field that I'm unaware of.

Is there something that I'm missing?

Solution