React pagination component

Question

Its a movie search/finder, with pagination component.

The pagination currently doesn't work as aspected.

• issue: clicking the pagination the movies are always the same.

Sorry about the codepen, I'm new to react and I'm a bit lost.

• https://codepen.io/davide77/pen/xxrRdZR?editors=1010

  <div className="pagination-container">
  <div className="pagination-left">
    <span>{total} results found</span>
  </div>
  <div className="pagination-right">
    <div className="pagination-current">
      Page {pageNo + 1} of {maxPages}
    </div>
    <div className="pagination-buttons">
      <div className="pagination-button-wrapper">
        <button onClick={onPrev} className="pagination-button">
          &lt;
        </button>
      </div>
    </div>
    <div className="pagination-buttons">
      <div className="pagination-button-wrapper">
        <button onClick={onNext} className="pagination-button">
          &gt;
        </button>
      </div>
    </div>
  </div>
  

Answer 1

Just use react-bhx-pagination to do this easily passing a json or the endpoint. Everything will work

Repo: react-bhx-pagination

Example: Online Demo

Answer 2

There is a problem on your useEffect. You wrote:

useEffect(() => {
    getMovies();
  }, [pageNo]);

But should be:

useEffect(() => {
   getMovies(keyword, pageNo);
}, [pageNo, keyword]);

Why? Because every time you change pageNo, useEffect will be fired but if you don't pass to the function the new page value, getMovies will return always with films of the first page.

Then, of course, pageNo should start from 1:

const [pageNo, setPageNo] = useState(1);

And of course you should change this div (is not necessary to do pageNo - 1)

<div className="pagination-current">
Page {pageNo} of {maxPages}
</div>

Here your codepen modified.