React Select disable options

Question

I'm having issues disabling certain options within a large list within a React Select element. I have around 6,500 options that get loaded into the select. At first I was having issues with the search functionality lagging but then I started using react-select-fast-filter-options which took care of that problem. Now the issue is that I need to disable certain options depending on the propType "picks". Here is the code:

import React, {Component} from 'react' import PropTypes from 'prop-types'; import 'react-select/dist/react-select.css' import 'react-virtualized/styles.css' import 'react-virtualized-select/styles.css' import Select from 'react-virtualized-select' import createFilterOptions from 'react-select-fast-filter-options';  let options = []; if(typeof stockSearchStocks !== 'undefined') {     //loads in all available options from backend by laying down a static js var     options = stockSearchStocks } const filterOptions =  createFilterOptions({options});  class StockSearch extends Component {     static propTypes = {         exchanges: PropTypes.array.isRequired,         onSelectChange: PropTypes.func.isRequired,         searchDisabled: PropTypes.bool.isRequired,         picks: PropTypes.array.isRequired,         stock_edit_to_show: PropTypes.number     }      /**      * Component Bridge Function      * @param stock_id stocks id in the database      */     stockSearchChange = (stock_id) => {         this.props.onSelectChange(stock_id);     }       //this is my current attempt to at least       //disable options on component mount but this doesn't seem to be working     componentWillMount = () => {         console.log('picks!: ' + JSON.stringify(this.props.picks));         let pickIDs = this.props.picks.map((p) => p.stock_id);         options = options.map((o) => {             // console.log(pickIDs.indexOf(o.value));             if(pickIDs.indexOf(o.value)) {                 // console.log('here is the option: ' + JSON.stringify(o));                 // console.log('here is the option: ' + o.disabled);                 o.disabled = true;             }         })      }      /**      * handles selected option from the stock select      * @param selectedOption      */     handleSelect = (selectedOption) => {         this.stockSearchChange(selectedOption.value);     }      render() {         return (             <div className="stock-search-container">                 <Select                     name="stock-search"                     options={options}                     placeholder="Type or select a stock here..."                     onChange={this.handleSelect}                     disabled={this.props.searchDisabled}                     value={this.props.stock_edit_to_show}                     filterOptions={filterOptions}                 />             </div>         )     } }  export default StockSearch; 

I have tried filtering through the picks props and changing that options variable to include disabled:true but this lags the application and I'm not sure if that will work now that I'm using react-select-fast-filter-options as it seems to be doing some sort of indexing. Is there a way to filter through the options var to find all instances of the picks prop and disable those options quickly?

Answer 1

isDisabled={this.props.disabled} 

You are passing a wrong prop.. For v2, the prop is isDisabled.

https://github.com/JedWatson/react-select/issues/145

Answer 2

In react-select v2:

1. add to your array of options a property 'disabled': 'yes' (or any other pair to identify disabled options)

2. use isOptionDisabled props of react-select component to filter options based on 'disabled' property

Here's an example:

import Select from 'react-select';  const options = [   {label: "one", value: 1, disabled: true},   {label: "two", value: 2} ]  render() {   <Select id={'dropdown'}          options={options}          isOptionDisabled={(option) => option.disabled}>  </Select>  } 

More information about react-select props is in the docs and here's an example they reference.