title: search list for keywords in react
body: <p>I have an input (search) and a multi select list.
  The select list is to be "quick searchable".
  The input from the search box will likely be space delimited. EX: "thing im looking for"
  I want the only selectable options to contain ALL keywords.
  I have tried 100 permutations of filter and map, and can not seem to make this happen. Thanks in advance for any and all help.</p>
  
  <p>The following is the general gist of what I am working with.</p>
  
  <pre><code>this.state = {
      search:["some terms"],
      list:["terms A some","some B terms", "C some term"]
  }
  
  renderOptions = (list, search) =&gt; {
      let options
      search.forEach(term =&gt;{
        options = term.length &gt; 0 ? list.filter(list =&gt; list.toLowerCase().includes(term.toLowerCase())) : options
      })
      return options &amp;&amp; options.map((option,i)=&gt;
        &lt;option key={i} value={option}&gt;{option}&lt;/option&gt;
      )
    }
  
  handleChange = (e) =&gt; {
      this.setState({[e.target.name]:e.target.value.toLowerCase().split(' ')})
  }
  
  render(){
      ...
      &lt;Form.Control name="search" type="text" placeholder="search terms" onChange={this.handleChange.bind(this)}/&gt;
      &lt;Form.Control as="select" multiple&gt;
          { this.state.list &amp;&amp; this.renderOptions(this.state.list,this.state.search) }
      &lt;/Form.Control&gt;
  }
  </code></pre>
  
  <p>The select list should find this.state.list[0] and [1] true, and [2] false</p>
  
  <pre><code>&lt;select&gt;
      &lt;option&gt; terms A some &lt;/option&gt;
      &lt;option&gt; some B terms &lt;/option&gt;
  &lt;/select&gt;
  </code></pre>