title: How to do an filter onChange in ReactJS?
body: <p>I have the code below <code>filterNames()</code></p>
  
  <pre><code>filterNames() {
      const { peoples } = this.state;
      this.setState({
        filtered: peoples.filter(item =&gt; item.name.includes(this.state.input)),
        currentPage:0
      });
      console.log(this.state.filtered)
  } 
  </code></pre>
  
  <p>That filters when I click this button</p>
  
  <p>button:</p>
  
  <pre><code>&lt;button className='search' onClick={this.filterNames}&gt;
      Search
  &lt;/button&gt;
  </code></pre>
  
  <p>Input:</p>
  
  <pre><code>&lt;input type="text" onChange={ this.getValueInput }&gt;&lt;/input&gt;
  </code></pre>
  
  <p>I want it where when I type the letter 'a' on input, it filters.</p>
  
  <p>Resuming: I want to filter without clicking the button, just when I type on input.</p>
  
  <p>My code all:</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>class Pagination extends React.Component {
    constructor() {
      super();
           
      const peoples = [
        {id:0, name:"Jean"}, 
        {id:1, name:"Jaquinha"}, 
        {id:2, name:"Ricardo"}, 
        {id:3, name:"JaCA"}, 
        {id:4, name:"Letiiicia"}, 
        {id:5, name:"Dai"}, 
        {id:6, name:"Da iIIane"}, 
        {id:7, name:"Tamy"}, 
        {id:8, name:"Tamyresss"},
        {id:9, name:"Tamyres"}, 
        {id:10, name:"Abeu"}, 
        {id:11, name:"Abellll"}
      ];
      
      this.state = {
        elementsPerPage:3,
        currentPage:0,
        peoples,
        input: "",
        filtered: peoples,
      };
  
      this.nextPage = this.nextPage.bind(this);
      this.previousPage = this.previousPage.bind(this);
      this.filterNames = this.filterNames.bind(this);
      this.getValueInput = this.getValueInput.bind(this);
    } 
    
    getValueInput (value) {
      this.setState({ input: value.target.value });
    }
      
    filterNames() {
      const { peoples } = this.state;
      this.setState({
        filtered: peoples.filter(item =&gt; item.name.includes(this.state.input)),
        currentPage:0
      });
      console.log(this.state.filtered)
    } 
    
    elementsOnScreen() {
      const { elementsPerPage, currentPage, filtered } = this.state;
      return filtered
        .map((item) =&gt; &lt;li key={item.id}&gt; {item.name} &lt;button onClick={() =&gt; this.remove(item.name)}&gt; Delete &lt;/button&gt; &lt;/li&gt;)
        .slice(currentPage*elementsPerPage, currentPage*elementsPerPage + elementsPerPage);
      
      if (this.state.filtered.length &lt; 1) {
        this.setState({currentPage: this.state.currentPage - 1})
      }
    }
  
    remove = (id) =&gt; {
      console.log(this.state.filtered.length)
      if (this.state.filtered.length &lt; 0) {
         this.setState({currentPange: this.state.currenPage - 1})
      }
      this.setState({filtered: this.state.filtered.filter(item =&gt; item.name !== id) })
    }
    
    nextPage() {
      console.log(this.state.filtered)
  
      const {elementsPerPage, currentPage, filtered} = this.state;
      
      if ((currentPage+1) * elementsPerPage &lt; filtered.length){
        this.setState({ currentPage: this.state.currentPage + 1 });
      }
    }
    
    previousPage () {
      const { currentPage } = this.state;
      if(currentPage - 1 &gt;= 0){
        this.setState({ currentPage: this.state.currentPage - 1 });
      }
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;input type="text" onChange={ this.getValueInput }&gt;&lt;/input&gt;
          &lt;button className='search' onClick={this.filterNames}&gt; Search &lt;/button&gt;
          &lt;button onClick={this.previousPage}&gt; Previous &lt;/button&gt;
          &lt;button onClick={this.nextPage}&gt; Next &lt;/button&gt;
          &lt;h3&gt;Current Page: {this.state.currentPage}&lt;/h3&gt;
          &lt;ul&gt;Names: {this.elementsOnScreen()}&lt;/ul&gt;
        &lt;/div&gt;
      );
    }
  }
  
  
  ReactDOM.render(
    &lt;Pagination/&gt;,
    document.getElementById('root')
  )</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="root"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>