How to fix a bug in react-paginate?

Question

React

By analogy with this option https://codesandbox.io/s/bold-field-3eqql?file=/sr... I tried to display my pagination based on react-paginate:
https://codesandbox.io/s/eager- oskar-471xm?file=/s...
But repositories and page numbers are not displayed. What is wrong?

Answer 1

The fact is that to calculate pageCount, you need to know the total number of search results. Data.length is not it, but exactly 10, because exactly 10 is passed in the per_page parameter in GithubAPI. That is, 10 requested - 10 received. Accordingly, all 10 are reduced on 1 page - and pagination is not displayed.
And the repositories are not displayed because it is necessary like this:

useEffect(() => {
    if (user) {
      fetch(
        `//api.github.com/users/${user.login}/repos?page=${currentPage}&per_page=${PER_PAGE}`
      )
        .then((res) => res.json())
        .then(setData);
    }
  }, [user, currentPage]);

Then, when changing the user or currentPage variable, useEffect will be processed