How to implement pagination in React JS with REST API

Question

I need to create pagination in my site. I'm getting data like this from REST API:

{
    "count": 4,
    "next": "http://127.0.0.1:8000/api/software/?p=2",
    "previous": null,
    "results": [
        {
            "id": 4,
            "category": {
                "id": 10,
                "parent": {
                    "id": 2,
                    "name": "Name",
                    "slug": "Slug",
                    "img": "Image"
                },
                "name": "Name",
                "slug": null,
                "img": ""
            },
            "title": "Title",
            "content": "Content",
            "image": "Image",
            "pub_date": "2022-02-02",
            "counter": 0,
            "file": "File",
            "in_archive": false
        },
        {
            "id": 3,
            "category": {
                "id": 11,
                "parent": {
                    "id": 2,
                    "name": "Name",
                    "slug": "Slug",
                    "img": "Image"
                },
                "name": "Name",
                "slug": null,
                "img": ""
            },
            "title": "Title",
            "content": "Content",
            "image": "Image",
            "pub_date": "2022-02-02",
            "counter": 0,
            "file": "File",
            "in_archive": false
        }
    ]
}

In React I'm trying to get the data like this:

const [currentPage, setCurrentPage] = useState(1);
const [count, setCount] = useState(null);
const [nextPage, setNextPage] = useState(null);
const [previousPage, setPreviousPage] = useState(null);
const [valid, setValid] = useState(false);

useEffect(() => {
  fetch(`http://127.0.0.1:8000/api/software/?p=${currentPage}`)
      .then(response => response.json())
      .then(data => {
        setCount(data.count);
        setNextPage(data.next);
        setPreviousPage(data.previous);
        setValid(true);
      })
}, []);

But I have no idea how it must be and how to use it in React Component, I've not done that before.

How it has to be in React?

Rajiv Punjabi · Accepted Answer · 2021-03-16 13:09:20Z

3

Currently your useEffect hook has no dependency. It will only run on mount and unmount. Instead add your currentPage as a dependency for your useEffect Hook.

Whenever the currentPage changes useEffect hook will run and the data will be fetched.

useEffect(() => {
          fetch(`http://127.0.0.1:8000/api/software/?p=${currentPage}`)
              .then(response => response.json())
              .then(data => {
                setCount(data.count);
                setNextPage(data.next);
                setPreviousPage(data.previous);
                setValid(true);
              })
        }, [currentPage]); //Added Dependency

To load the next page simply increment your currentPage

const incrementPageNumber = () => setCurrentPage(prevPage => prevPage + 1);

To load the previous page simply decrement your currentPage

const decrementPageNumber = () => {
  if(currentPage <= 1) return; 
  setCurrentPage(prevPage => prevPage - 1);
}

edited Mar 16, 2021 at 13:09

answered Mar 16, 2021 at 12:57

Rajiv Punjabi

5223 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Albert Over a year ago

Thanks for answer, it helped. But I have a question: do I need to add Route with the page number or not?

Rajiv Punjabi Over a year ago

For this approach, there is no need for any additional routes

Rajiv Punjabi Over a year ago

I have written a small sandbox for you. Refer - codesandbox.io/s/gallant-meninsky-1i50j?file=/src/App.tsx

Collectives™ on Stack Overflow

How to implement pagination in React JS with REST API

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related