I have been trying to use react-select-fast-filter-options by passing props.options, but the filtering does not happen. All the options are getting rendered but the filter doesn't work.
I am also getting a warning: Warning: getDefaultProps is only used on classic React.createClass definitions. Use a static property named defaultProps instead.
This is how I am trying to use the fast-filter:
import React, { Component } from 'react'; import VirtualizedSelect, { Value } from 'react-virtualized-select'; import createFilterOptions from 'react-select-fast-filter-options'; import 'react-select/dist/react-select.css'; import styles from './CategoryDropdown.less'; import CategoryDropdownOption from './CategoryDropdownOption'; import CategoryDropdownValue from './CategoryDropdownValue'; class CategoryDropdown extends Component { constructor(props, context) { super(props, context); **const filterOptions = createFilterOptions({ labelKey: 'code', options: props.options });** this.sortOptions = this.sortOptions.bind(this); this.setValue = this.setValue.bind(this); this.clearValue = this.clearValue.bind(this); const dValue = props.defaultValue ? props.defaultValue : {}; this.state = { value: dValue, options: [], selectedOption:{}, filterOptions }; } componentDidMount() { this.sortOptions(this.props.options); this.setValue(''); } componentWillReceiveProps(nextProps) { this.sortOptions(nextProps.options); } clearValue() { this.setState({ value: '' }); this.setState({selectedOption:{}}); } return ( <div key={key} className={classNames.join(' ')} onClick={() => { focusOption(option); selectValue(option); }} onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); focusOption(option); selectValue(option); }} onMouseEnter={() => { focusOption(option); }} style={style} title={option.label}> <div className="categoryOptionType"> <span className={option.categoryName}>{option.categoryDisplayName}</span> </div> <div className="optionLabelContainer"> <span className="optionLabel">{value}</span> </div> </div> ); } render() { const {filterOptions} = this.state; return ( <VirtualizedSelect simpleValue clearable={true} label='code' name="form-field-name" multi={this.props.multi} optionHeight={20} onChange={this.setValue} **filterOptions={filterOptions}** options={this.state.options} searchable={true} value={this.state.selectedOption} optionRenderer={this.virtualOptionRenderer} valueComponent={this.props.emptyValueComponent ? Value : CategoryDropdownValue} className={this.props.className || 'categoryDropdown'} optionClassName={this.props.optionClassName || 'categoryOption'} placeholder={this.props.placeholder || 'Start typing to search'} autosize={this.props.autosize !== false} //matchProp="label" /> ); } } export default CategoryDropdown;