forcePage is not working

[AshuInsideOut]

Hey, I have tried every way and I am not able to use useState hook to change the page using a button.

const Search = ({ entries, EntryComponent, NoResultComponent }) => {
  const itemsPerPage = 5;
  const [search, setSearch] = useState('');
  const [filteredEntries, setFilteredEntries] = useState(entries);
  const [pageCount, setPageCount] = useState(
    Math.ceil(entries.length / itemsPerPage)
  );
  const [itemOffset, setItemOffset] = useState(0);
  const endOffset = itemOffset + itemsPerPage;
  const [currentItems, setCurrentItems] = useState(
    entries.slice(itemOffset, endOffset)
  );
  const [activePage, setActivePage] = useState(0);

  useEffect(() => {
    const endOffset = itemOffset + itemsPerPage;
    console.log(`Loading items from ${itemOffset} to ${endOffset}`);
    setCurrentItems(filteredEntries.slice(itemOffset, endOffset));
    setPageCount(Math.ceil(filteredEntries.length / itemsPerPage));
  }, [itemOffset, itemsPerPage]);

  const handlePageClick = (event) => {
    const newOffset = (event.selected * itemsPerPage) % filteredEntries.length;
    console.log(
      `User requested page number ${event.selected}, which is offset ${newOffset}`
    );
    setItemOffset(newOffset);
    setActivePage(event.selected);
  };

  const getFilteredEntries = (searchTerm) => {
    return entries.filter((entry) => {
      return entry.searchTerm.toLowerCase().includes(searchTerm.toLowerCase());
    });
  };
  const handleChange = (e) => {
    setSearch(e.target.value);
    const endOffset = itemOffset + itemsPerPage;
    const filteredOrEntries =
      e.target.value.length === 0
        ? entries
        : getFilteredEntries(e.target.value);
    setFilteredEntries(filteredOrEntries);
    setCurrentItems(filteredOrEntries.slice(itemOffset, endOffset));
    setPageCount(Math.ceil(filteredOrEntries.length / itemsPerPage));
    setActivePage(0);
  };
  return (
    <>
      <button onClick={() => setActivePage(1)}>Change</button>
      <div className='search__container'>
        <div className='search__bar'>
          <FontAwesomeIcon icon={solid('magnifying-glass')} id='mag-glass' />
          <input
            className='search__input'
            type='text'
            placeholder='Search'
            onChange={handleChange}
          />
        </div>
      </div>

      <Results
        entries={currentItems}
        EntryComponent={EntryComponent}
        NoResultComponent={NoResultComponent}
        search={search}
      />
      <ReactPaginate
        breakLabel='...'
        nextLabel='next >'
        onPageChange={handlePageClick}
        pageRangeDisplayed={5}
        pageCount={pageCount}
        previousLabel='< previous'
        forcePage={activePage}
      />
    </>
  );
};

Is there something I am doing wrong?

[AshuInsideOut]

<button onClick={() => setActivePage(1)}>Change</button>

When I click this button nothing changes.

[MonsieurV]

Hi @AshuGuptaGamer,

Could you provide a running example in a GitHub repo / CodePen / JsFiddle?

Also: do you have any message on the console? Can you console.log the pageCount andactivePage` just before the render?

[AshuInsideOut]

Oh, yeah it worked. I forgot to update the setItemOffset(); in the button. It works now thanks for the help :)