title: Search and Filter with Pagination
body: <p>I started learning react and working on a personal gaming db website project. I'm struggling to make my filtering/search and pagination to work together. I'm using a local json file for my data and the flow I had in mind was to filter the data first before doing a pagination. But I can't make both of them work, it's either filtering and search works or only my pagination works, but not both.</p>
  <p>Hope someone can shed some light.</p>
  <p>Here's my App component - if I pass 'filteredGames' on CardGroup component, I'm able to do both filtering and search. If I pass 'pageNumber', I'm able to do pagination. Struggling to find a logic on how to have both.</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  import Navi from &quot;./Navi&quot;;
  import CardGroup from &quot;./CardGroup&quot;;
  import SearchBox from &quot;./SearchBox&quot;;
  import &quot;./App.css&quot;;
  import games from &quot;./csvjson.json&quot;;
  import Content from &quot;./Content&quot;;
  import FilterDropDown from &quot;./FilterDropDown&quot;;
  import { HashRouter as Router, Route, useLocation } from &quot;react-router-dom&quot;;
  import ReactPaginate from &quot;react-paginate&quot;;
  
  
  
  function App() {
  
  
      function ScrollToTop() {
    const { pathname } = useLocation();
  
    useEffect(() =&gt; {
      window.scrollTo(0, 0);
    }, [pathname]);
  
    return null;
  }
  
  
      const gameFromApp = (games) =&gt; {
      var x = 0;
      var y = 20;
      var slicedArray = games.slice(0, 20); //50
      var asliced = [];
      while (slicedArray.length &gt; 0) {
        asliced.push(slicedArray);
        x += 20; //x50
        y += 20; //y100
        slicedArray = games.slice(x, y); //50
      }
  
      return asliced;
    };
  
  
  
    let asliced = gameFromApp(games);
    let totalPage = Math.ceil(asliced.length);
    // console.log(totalpage);
  
    const [pageNumber, setPageNumber] = useState(asliced[0]);
    //       // console.log(pageGames)
  
    const fetchGames = (currentPage) =&gt; {
      const data = asliced[currentPage];
      return data;
    };
  
    const handlePageClick = (data) =&gt; {
      let currentPage = data.selected;
      console.log(currentPage);
      const currentPagex = fetchGames(currentPage);
      console.log(currentPagex);
      setPageNumber(currentPagex);
      setCurrPage(currentPage);
      window.scrollTo(0, 0)
    };
  
  
    const [searchfield, setSearchfield] = useState(&quot;&quot;);
    const [filterField, setFilterField] = useState(&quot;&quot;);
    const [currPage, setCurrPage] = useState(0);
    const [genreDropDown, setGenreDropDown] = useState(&quot;All genres&quot;);
    const onDropDownChange = (dropDownValue) =&gt; setGenreDropDown(dropDownValue);
  
  
  
    const onSearchChange = (event) =&gt; {
      setSearchfield(event.target.value);
      // event.preventDefault();
    };
  
    const clearSearchChange = (event) =&gt; {
      setSearchfield(&quot;&quot;);
    }
  
    const clearFilter = (event) =&gt; {
      setFilterField(&quot;&quot;);
    }
  
    const onFilterChange = (filterGenre) =&gt; {
      setFilterField(filterGenre)
    };
  
  
  
  
  
    const filteredGames = games.filter((game) =&gt; {
      return (
        game.Title.toLowerCase().includes(searchfield.toLowerCase()) &amp;&amp;
        game.genre.toLowerCase().includes(filterField.toLowerCase())
      );
    });
  
  
  
    return (
      &lt;div&gt;
      &lt;Router&gt;
        &lt;Route
          path=&quot;/&quot;
          exact
          render={(props) =&gt; (
            &lt;div&gt;
              &lt;Navi /&gt;
              &lt;SearchBox 
                searchfield={searchfield}
                onSearchChange={onSearchChange} 
                onFilterChange={onFilterChange}
                genreDropDown={genreDropDown}
                onDropDownChange={onDropDownChange}
              /&gt;
  
              &lt;CardGroup 
                games={pageNumber} 
                clearFilter={clearFilter} 
                clearSearchChange={clearSearchChange} 
                onFilterChange={onFilterChange} 
                genreDropDown={genreDropDown} 
                onDropDownChange={onDropDownChange}/&gt;
  
                                    &lt;ReactPaginate
                                    initialPage={currPage}
            previousLabel={&quot;&lt;&lt;&quot;}
            nextLabel={&quot;&gt;&gt;&quot;}
            breakLabel={&quot;...&quot;}
            pageCount={totalPage}
            marginPagesDisplayed={2}
            pageRangeDisplayed={3}
            onPageChange={handlePageClick}
            containerClassName={&quot;pagination justify-content-center&quot;}
            pageClassName={&quot;page-item&quot;}
            pageLinkClassName={&quot;page-link&quot;}
            previousClassName={&quot;page-item&quot;}
            previousLinkClassName={&quot;page-link&quot;}
            nextClassName={&quot;page-item&quot;}
            nextLinkClassName={&quot;page-link&quot;}
            breakLinkClassName={&quot;page-link&quot;}
            activeClassName={&quot;active&quot;}
          /&gt;
  
            &lt;/div&gt;
          )}      
        /&gt;
  
        
        &lt;Route path=&quot;/games/:games&quot; component={Content} /&gt;
        &lt;ScrollToTop /&gt;
      &lt;/Router&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>