title: Filter does not get applied on change of input text: ReactJS
body: <p>I am trying to implement a search filter that searches the characters across the entire table. The filter is not getting applied correctly. I am using react-table for the data grid. I am firing change handler on every input and then using filter to filter out the data. Unable to achieve the same</p>
  
  <p>Help would be appreciated.</p>
  
  <p><a href="https://codesandbox.io/s/happy-hooks-tblde" rel="nofollow noreferrer">https://codesandbox.io/s/happy-hooks-tblde</a></p>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  import { Input } from "semantic-ui-react";
  import ReactTable from "react-table";
  import "react-table/react-table.css";
  import "./styles.css";
  
  export default class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        data: [],
        filteredData: [],
        columns: [],
        searchInput: ""
      };
    }
  
    componentDidMount() {
      this.getData();
      this.getColumns();
    }
  
    getColumns = () =&gt; {
      let columns = [
        {
          Header: "First Name",
          accessor: "firstName"
        },
        {
          Header: "Status",
          accessor: "status"
        },
        {
          Header: "Visits",
          accessor: "visits"
        }
      ];
      this.setState({ columns });
    };
  
    getData = () =&gt; {
      let data = [
        { firstName: "aaaaa", status: "Pending", visits: 155 },
        { firstName: "aabFaa", status: "Pending", visits: 155 },
        { firstName: "adaAAaaa", status: "Approved", visits: 1785 },
        { firstName: "aAaaaa", status: "Approved", visits: 175 },
        { firstName: "adaSaaa", status: "Cancelled", visits: 165 },
        { firstName: "aasaaa", status: "Cancelled", visits: 157 },
        { firstName: "aweaaaaaewea", status: "Approved", visits: 153 },
        { firstName: "adaAAadsdweaa", status: "Approved", visits: 17585 },
        { firstName: "aAaaaa", status: "Approved", visits: 175 },
        { firstName: "adadsdSaaa", status: "Cancelled", visits: 165 }
      ];
      this.setState({ data });
    };
  
    handleChange = event =&gt; {
      this.setState({ searchInput: event.target.value }, () =&gt; {
        this.globalSearch();
      });
    };
  
    globalSearch = () =&gt; {
      let { data, searchInput } = this.state;
      let filteredData = data.filter(value =&gt; {
        return (
          value.firstName.toLowerCase().includes(searchInput.toLowerCase()) ||
          value.status.toLowerCase().includes(searchInput.toLowerCase()) ||
          value.visits
            .toString()
            .toLowerCase()
            .includes(searchInput.toLowerCase())
        );
      });
      this.setState({ filteredData });
    };
  
    render() {
      let { data, columns, searchInput, filteredData } = this.state;
      return (
        &lt;div&gt;
          &lt;Input
            size="large"
            name="searchInput"
            value={searchInput || ""}
            onChange={this.handleChange}
            label="Search"
          /&gt;
          &lt;ReactTable
            data={filteredData.length &gt; 0 &amp;&amp; filteredData ? filteredData : data}
            columns={columns}
            defaultPageSize={10}
            className="-striped -highlight"
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  const rootElement = document.getElementById("root");
  ReactDOM.render(&lt;App /&gt;, rootElement);
  
  </code></pre>