title: React Select disable options
body: <p>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:</p>
  
  <pre><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) =&gt; {
          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 = () =&gt; {
          console.log('picks!: ' + JSON.stringify(this.props.picks));
          let pickIDs = this.props.picks.map((p) =&gt; p.stock_id);
          options = options.map((o) =&gt; {
              // 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) =&gt; {
          this.stockSearchChange(selectedOption.value);
      }
  
      render() {
          return (
              &lt;div className="stock-search-container"&gt;
                  &lt;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}
                  /&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default StockSearch;
  </code></pre>
  
  <p>I have tried filtering through the picks props and changing that options variable to include <code>disabled:true</code> 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?</p>