title: React Search Box working well while adding text but not working in backward direction (when deleting some text by backspace)-ReactJS/Javascript
body: <p>This is my Demo Project - <a href="https://codesandbox.io/s/5403m1n20n" rel="nofollow noreferrer">Demo</a>. I am working with React Table. I am trying to create a custom box which can filter only the first column - firstName. Based on the first column search the corresponding rows of other columns will be displayed.</p>
  
  <p>Filter work perfectly fine when we are adding characters, but once we start deleting characters filtering does not happen <a href="https://codesandbox.io/s/5403m1n20n" rel="nofollow noreferrer">Demo</a></p>
  
  <p>This is main Code (Parent Page)</p>
  
  <pre><code>import React from "react";
  import { render } from "react-dom";
  import TypeChecker from "typeco";
  // import matchSorter from "match-sorter";
  import SearchField from "./SearchField";
  import "./App.css";
  
  import Child from "./Child/Child";
  import jsondata from "./sample";
  
  // Import React Table
  import ReactTable from "react-table";
  import "react-table/react-table.css";
  
  class App extends React.Component {
    constructor() {
      super();
      this.state = {
        // data: makeData(),
        data: jsondata,
        dataDefault: jsondata,
        basicExampleList: jsondata,
        filtered: [],
        select2: null,
        select3: null,
        childOpen: false
      };
      this.openChild = this.openChild.bind(this);
      this.applyFilter = this.applyFilter.bind(this);
      this.showDefaultView = this.showDefaultView.bind(this);
      this.onBasicExampleChange = this.onBasicExampleChange.bind(this);
      this.onEnterExample = this.onEnterExample.bind(this);
      this.onSearchClickExample = this.onSearchClickExample.bind(this);
      this.getMatchedList = this.getMatchedList.bind(this);
    }
  
    getMatchedList(searchText) {
      console.log("getMatchedList entered");
      console.log("the search text is " + searchText);
      const exampleList = this.state.basicExampleList;
      if (TypeChecker.isEmpty(searchText)) {
        console.log(
          "if block of getMatchedList - &gt; TypeChecker.isEmpty(searchText) " +
            TypeChecker.isEmpty(searchText)
        );
        this.setState({ basicExampleList: exampleList });
        return this.state.basicExampleList;
      }
      if (!TypeChecker.isEmpty(searchText)) {
        console.log("if block of getMatchedList is not entered ");
        return exampleList.filter(
          item =&gt;
            item.firstName.includes(searchText) ||
            item.firstName.includes(searchText)
        );
      }
    }
  
    onBasicExampleChange(value) {
      console.log("onchange entered");
      console.log(" the value is " + value);
      this.setState({
        basicExampleList: this.getMatchedList(value)
      });
    }
  
    onEnterExample(value) {
      this.setState({
        basicExampleList: this.getMatchedList(value)
      });
    }
  
    onSearchClickExample(value) {
      this.setState({
        basicExampleList: this.getMatchedList(value)
      });
    }
  
    applyFilter(filtered) {
      console.log("Entering Apply Filter Function of Parent");
      console.log("The filtered data in parent " + JSON.stringify(filtered));
      const currentStateChild = this.state.childOpen;
      this.setState(
        {
          childOpen: !currentStateChild
        },
        () =&gt; {
          console.log("Child is opened " + this.state.childOpen);
        }
      );
      const filterArray = filtered;
      const apidata = this.state.data;
      let filteredData = apidata.filter((
        item // filter jsondata
      ) =&gt;
        filterArray.every((
          f // so every member of filter array
        ) =&gt; f.value.includes(item[f.id]))
      ); // has a corresponding item[id] in value
  
      console.log("The filtered rows are " + JSON.stringify(filteredData));
      this.setState(
        {
          data: filteredData
        },
        () =&gt; {
          console.log("Manipulated rows " + this.state.data);
        }
      );
    }
  
    openChild() {
      const currentStateChild = this.state.childOpen;
      this.setState(
        {
          childOpen: !currentStateChild
        },
        () =&gt; {
          console.log("Child is opened " + this.state.childOpen);
        }
      );
    }
  
    showDefaultView() {
      const defaultDataParent = this.state.dataDefault;
      this.setState(
        {
          data: defaultDataParent
        },
        () =&gt; {
          console.log("Default rows " + this.state.data);
        }
      );
    }
  
    render() {
      const { data } = this.state;
      return (
        &lt;div&gt;
          &lt;div className="clickMeToOpenChild" onClick={this.openChild}&gt;
            {" "}
            Click Me to Open Child
          &lt;/div&gt;
          &lt;div className="clickMeToGetDefaultView" onClick={this.showDefaultView}&gt;
            {" "}
            Click Me to show Default View
          &lt;/div&gt;
          &lt;br /&gt;
          &lt;SearchField
            placeholder="Search item"
            onChange={this.onBasicExampleChange}
            onEnter={this.onEnterExample}
            onSearchClick={this.onSearchClickExample}
          /&gt;
          &lt;br /&gt;
          &lt;br /&gt;
          &lt;ReactTable
            data={this.state.basicExampleList}
            filterable
            filtered={this.state.filtered}
            onFilteredChange={(filtered, column, value) =&gt; {
              this.onFilteredChangeCustom(value, column.id || column.accessor);
            }}
            defaultFilterMethod={(filter, row, column) =&gt; {
              const id = filter.pivotId || filter.id;
              if (typeof filter.value === "object") {
                return row[id] !== undefined
                  ? filter.value.indexOf(row[id]) &gt; -1
                  : true;
              } else {
                return row[id] !== undefined
                  ? String(row[id]).indexOf(filter.value) &gt; -1
                  : true;
              }
            }}
            columns={[
              {
                Header: "Name",
                columns: [
                  {
                    Header: "First Name",
                    accessor: "firstName"
                  },
                  {
                    Header: "Last Name",
                    id: "lastName",
                    accessor: d =&gt; d.lastName
                  }
                ]
              },
              {
                Header: "Info",
                columns: [
                  {
                    Header: "Age",
                    accessor: "age"
                  }
                ]
              }
            ]}
            defaultPageSize={10}
            className="-striped -highlight"
          /&gt;
          {this.state.childOpen &amp;&amp; (
            &lt;Child data={data} applyFilter={this.applyFilter} /&gt;
          )}
          &lt;br /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  render(&lt;App /&gt;, document.getElementById("root"));
  </code></pre>
  
  <p>Kindly help me to get rid of this issue.</p>