title: How do I search data with pagination in React?
body: <pre><code>class Employee extends Component {
    constructor() {
      super();
      this.state = {
        // employees: employees,
        employees: [],
        searchfield: &quot;&quot;,
        currentPage: 1,
        resultsPerPage: 50,
        holder: [],
        filteredEmployees: [],
        value: &quot;&quot;,
      };
    }
  
    componentDidMount = async () =&gt; {
      axios.get(`http://localhost:5000/`).then((res) =&gt; {
        const employees = res.data;         
        this.setState({
          employees: employees.recordsets[0],
          holder: employees.recordsets[0],
        });
      });
    };
  
    onSearchChange = (event) =&gt; {
      let { value } = event.target;
      this.setState({ value }, () =&gt; {
        var updatedList = this.state.holder;
  
        updatedList = updatedList.filter((employee) =&gt; {
          const fullName = employee.empFirstNm + &quot; &quot; + employee.empLastNm;
          return (
            fullName.toLowerCase().search(this.state.value.toLowerCase()) !== -1
          );
        });
  
        this.setState({ employees: updatedList });
      });
    };
  
    //change page
    onPaginate = (pageNumber) =&gt; {
      this.setState({ currentPage: pageNumber });
    };
  
    render() {
      const { employees, searchfield, currentPage, resultsPerPage } = this.state;
      const { onRouteChange } = this.props;
  
      //Get current employees
      const indexOfLastEmployee = currentPage * resultsPerPage;
      const indexOfFirstEmployee = indexOfLastEmployee - resultsPerPage;
      console.log(&quot;indexOfFirstEmployee: &quot;, indexOfFirstEmployee);
      console.log(&quot;indexOfLastEmployee: &quot;, indexOfLastEmployee);
      const filteredEmployees = employees.slice(
        indexOfFirstEmployee,
        indexOfLastEmployee
      );
  
      return !employees.length ? (
        &lt;div className=&quot;tc&quot;&gt;
          &lt;h1&gt;Loading&lt;/h1&gt;
          &lt;Spinner animation=&quot;border&quot; variant=&quot;danger&quot; /&gt;
        &lt;/div&gt;
      ) : (
        &lt;FadeIn&gt;
          &lt;div className=&quot;tc&quot;&gt;
            &lt;div
              className=&quot;
            d-flex
            justify-content-between
            flex-wrap
            flex-md-nowrap
            align-items-center
            pt-3
            pb-2
            mb-3
            border-bottom&quot;
            &gt;
              &lt;h1 className=&quot;display-2&quot;&gt;Employees&lt;/h1&gt;
              &lt;div
                className=&quot;tr&quot;
                style={{
                  margin: &quot;15px 0&quot;,
                }}
              &gt;
                &lt;NewEmployee employees={employees} /&gt;
                &lt;SearchBox
                  searchChange={this.onSearchChange}
                  value={this.state.value}
                /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;Scroll&gt;
              &lt;CardList
                employees={filteredEmployees}
                onDelete={this.handleDelete}
                onRouteChange={onRouteChange}
              /&gt;
              &lt;Table
                employees={filteredEmployees}
                onRouteChange={onRouteChange}
              /&gt;
  
              &lt;Pagination
                resultsPerPage={resultsPerPage}
                totalResults={employees.length}
                onPaginate={this.onPaginate}
              /&gt;
            &lt;/Scroll&gt;
          &lt;/div&gt;
        &lt;/FadeIn&gt;
      );
    }
  }
  
     
  </code></pre>
  <blockquote>
  <p>I have tried implementing it with conditions of whether the results
  is greater than or equal to the results on a page but it did not
  work since it doesnt cover every single case based on the result.
  I am getting the search to work but when my current page is anything besides 1 is when the search doesn't work.</p>
  <p>Any idea how I can get the filtering to work regardless of what page I
  am on?</p>
  </blockquote>