title: React: issue with the search and filter function
body: <p>I'm working on a component that should be able to:</p>
  
  <ol>
  <li><p>Search by input - Using the input field a function will be called after the onBlur event got triggered. After the <strong>onBlur</strong> event the <strong>startSearch</strong>() method will run.</p></li>
  <li><p>Filter by a selected genre - From an other component the user can select a genre from a list  with genres. After the <strong>onClick</strong> event the <strong>startFilter</strong>() method will run.</p></li>
  </ol>
  
  <p><strong>GOOD NEWS:</strong>
  I got the 2 functions above working.</p>
  
  <p><strong>BAD NEWS:</strong>
  The above 2 functions don't work correct. Please see the code underneath. The 2 calls underneath work, but only if I comment one of the 2 out.  I tried to tweak the <strong>startSearch</strong>() method in various ways, but I just keep walking to a big fat wall.  </p>
  
  <pre><code>//////Searching works
  //////this.filter(this.state.searchInput);
  
  //Filtering works           
  this.startFilter(this.state.searchInput);
  </code></pre>
  
  <p><strong>QUESTION</strong>
  <strong>How can I get the filter/search method working?</strong>. Unfortunately simply putting them in an if/else is not the solution (see comments in the code). </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component } from 'preact';
  import listData from '../../assets/data.json';
  import { Link } from 'preact-router/match';
  import style from './style';
  
  export default class List extends Component {
    state = {
      selectedStreamUrl: '',
      searchInput: '',
      showDeleteButton: false,
      searchByGenre: false,
      list: []
    };
  
    startFilter(input, filterByGenre) {
      this.setState({
        searchByGenre: true,
        searchInput: input,
        showDeleteButton: true
      });
      alert('startFilter  ');
      console.log(this.state.searchByGenre);
      /////////---------------------------------
      document.getElementById('searchField').disabled = false;
      document.getElementById('searchField').value = input;
      document.getElementById('searchField').focus();
      // document.getElementById('searchField').blur()
      document.getElementById('searchField').disabled = true;
  
      console.log(input);
      this.filter(input);
    }
  
    //search
    startSearch(input) {
      alert('startSearch  ');
      console.log(this.state.searchByGenre);
  
      //komt uit render()
      if (!this.state.searchByGenre) {
        //check for input
  
        this.setState({
          searchInput: input.target.value,
          showDeleteButton: true
        });
  
        //Searching works
        //this.filter(this.state.searchInput);
  
        //Filtering works
        this.startFilter(this.state.searchInput);
  
        // DOESNT WORK:
        // if (this.state.searchInput != "") {
        //  this.filter(this.state.searchInput);
        // } else {
        //  this.startFilter(this.state.searchInput);
        // }
      }
    }
  
    setAllLists(allLists) {
      console.log('setAllLists');
      console.log(this.state.searchByGenre);
      this.setState({ list: allLists });
      //document.body.style.backgroundColor = "red";
    }
  
    filter(input) {
      let corresondingGenre = [];
      let filteredLists = listData.filter(item1 =&gt; {
        var test;
        if (this.state.searchByGenre) {
          alert('--this.state.searchByGenre');
          //filterByGenre
          //&amp; item1.properties.genre == input
  
          for (var i = 0; i &lt; item1.properties.genre.length; i++) {
            if (item1.properties.genre[i].includes(input)) {
              corresondingGenre.push(item1);
              test = item1.properties.genre[i].indexOf(input) !== -1;
  
              return test;
            }
            this.setState({ list: corresondingGenre });
          }
        } else {
          //searchByTitle
          alert('--default');
          test = item1.title.indexOf(input.charAt(0).toUpperCase()) !== -1;
        }
        return test;
      });
      console.log('filterdLists:');
      console.log(filteredLists);
      console.log('corresondingGenre:');
      console.log(corresondingGenre);
      //alert(JSON.stringify(filteredLists))
      this.setState({ list: filteredLists });
    }
  
    removeInput() {
      console.log('removeInput    ');
      console.log(this.state.searchByGenre);
      this.setState({
        searchInput: '',
        showDeleteButton: false,
        searchByGenre: false
      });
      document.getElementById('searchField').disabled = false;
      this.filter(this.state.searchInput);
    }
  
    render() {
      //alle 's komen in deze array, zodat ze gefilterd kunnen worden OBV title.
      if (
        this.state.list === undefined ||
        (this.state.list.length == 0 &amp;&amp; this.state.searchInput == '')
      ) {
        //init list
        console.log('render ');
        console.log(this.state.searchByGenre);
        this.filter(this.state.searchInput);
      }
  
      return (
        &lt;div class={style.list_container}&gt;
          &lt;input
            class={style.searchBar}
            type="text"
            id="searchField"
            placeholder={this.state.searchInput}
            onBlur={this.startSearch.bind(this)}
          /&gt;
  
          {this.state.searchByGenre ? &lt;h1&gt;ja&lt;/h1&gt; : &lt;h1&gt;nee&lt;/h1&gt;}
          {this.state.showDeleteButton ? (
            &lt;button class={style.deleteButton} onClick={() =&gt; this.removeInput()}&gt;
              Remove
            &lt;/button&gt;
          ) : null}
          {this.state.list.map((item, index) =&gt; {
            return (
              &lt;div&gt;
                &lt;p&gt;{item.title}&lt;/p&gt;
              &lt;/div&gt;
            );
          })}
        &lt;/div&gt;
      );
    }
  }</code></pre>
  </div>
  </div>
  </p>