title: How do I apply filter through all paginated items and only display the filtered items?
body: <p>When I apply filters, it only works on the first page of items. As I load more items, the filter disappears, and I have to click filter again, which is obviously not good. I want to only click Filter once and it will return all the items that match the criteria. </p>
  
  <p>Right now, the API I'm working on only has a little more than 200 items. Should I just make 3 paginated API calls to download all items in the API and join them into a master array, then filter from that local master array? That way it will display every filtered item on the page. </p>
  
  <p>But let's say I have an API with a much bigger database with a few thousand data points, then I don't want to load everything into the local array. I would like to know how to filter through all paginated items at once and display only the filtered items. </p>
  
  <p>Here's my code:</p>
  
  <pre><code>import React, {Component} from 'react';
  import axios from 'axios';
  import BookList from './BookList';
  import LoadingButton from './LoadingButton';
  import FilterButton from './FilterButton';
  
      const root_api = "...";
      const books_per_page = 15;
  
      class HomePage extends Component{
        constructor(props){
          super(props);
          this.state ={
          books:[],
          pageNum: 1,
          isLoading: false,
          isDataFetched: false,
          isListComplete: false,
          error:''};
      }
      //get 15 items at a time
      getBooks(){
        const requestUrl = `${root_api}books?page=${
          this.state.pageNum
        }&amp;per_page=${book_per_page}`;  
        this.setState({
          isLoading: true
        });
        axios.get(requestUrl)
        .then(res=&gt;{
              res.data.length &gt; 0
                ? this.setState({
                    books: [...this.state.books, ...res.data],
                    isLoading: false,
                    isDataFetched: true,
                    pageNum: this.state.pageNum + 1
                  })
                : this.setState({
                    isLoading: false,
                    isDataFetched: true,
                    isListComplete: true
                  });
        })
  
        .catch(err =&gt; {
          console.log(err);
          this.setState({
  
            isLoading: false,
            isDataFetched: false,
            error: err.message
          });
        });
  
      }
  
      filterBooks(){
        let newList =[];
        let currentList = [];
        currentList = this.state.books;
        newList = currentList.filter(function(book){
          return book.pages &gt; 1200; 
        });
        this.setState({books: newList});
      }
  
      render(){
  
         return(
           &lt;div&gt;
           &lt;FilterButton 
               isLoading={this.state.isLoading}
               isListComplete={this.state.isListComplete}
               clickHandler={()=&gt;this.filterBooks()}
                /&gt;
             {this.state.books.length &gt; 0 &amp;&amp;(
               &lt;BookList books={this.state.books} /&gt;)}
             &lt;LoadingButton
                isLoading={this.state.isLoading}
                isListComplete={this.state.isListComplete}
                clickHandler={()=&gt;this.getBooks()}
             /&gt;
             }
           &lt;/div&gt;
         )
  
  }}
  </code></pre>