React - Simple Component with Pagination

A code snippet for a React component with a simple pagination. When user clicks prev/next button, update query string (page, pageSize) via navigate() - this URL update does not reload the page. At first load and when useEffect([location.search]) sees location.search (query string) changed, populateMyList() runs. When populateMyList() fetches data, setMyList() and setLoading() are called. Those setState calls trigger a render to reflect the new data. import React, { useState, useEffect } from 'react'; import { useLocation, useNavigate } from 'react-router-dom'; export function MyList() { //this stores and tracks our data const [myList, setMyList] = useState({ totalCount: 0, data: [] }); const [loading, setLoading] = useState(true); //we need this to get and manipulate our querystring (page, pageSize) const location = useLocation(); const navigate = useNavigate(); const queryParams = new URLSearchParams(location.search); //set default page and pageSize if not in the URL const page = Number(queryParams.get('page')) || 1; const pageSize = Number(queryParams.get('pageSize')) || 10; const dataUrl = new URL('mylistdata', window.location.origin); dataUrl.searchParams.append('page', page); dataUrl.searchParams.append('pageSize', pageSize); //function to fetch data from the server const populateMyList = async () => { const response = await fetch(dataUrl); const data = await response.json(); setMyList(data); setLoading(false); }; //calls populate when querystring changed (page, pageSize) useEffect(() => { populateMyList(); }, [location.search]); //event handler to move to the previous page const goToPrevPage = () => { const params = new URLSearchParams(); if(page > 1) { params.set('page', page - 1); params.set('pageSize', pageSize); navigate(`?${params.toString()}`); } }; //event handler to move to the next page const goToNextPage = () => { const params = new URLSearchParams(); params.set('page', page + 1); params.set('pageSize', pageSize); navigate(`?${params.toString()}`); }; //this will be used to determine if we can go to the previous or next page const hasPrevPage = page > 1; const hasNextPage = myList.totalCount > page * pageSize; //function for rendering the actual list const renderMyList = (list) => ( {list.map(item => ( {item.name} ))} ); return ( My List {loading ? Loading... : renderMyList(myList.data)} Prev Next ); }

May 3, 2025 - 04:21

React - Simple Component with Pagination

A code snippet for a React component with a simple pagination.

When user clicks prev/next button, update query string (page, pageSize) via navigate() - this URL update does not reload the page.
At first load and when useEffect([location.search]) sees location.search (query string) changed, populateMyList() runs.
When populateMyList() fetches data, setMyList() and setLoading() are called. Those setState calls trigger a render to reflect the new data.

import React, { useState, useEffect } from 'react';
import { useLocation, useNavigate  } from 'react-router-dom';

export function MyList() {

    //this stores and tracks our data
    const [myList, setMyList] = useState({ totalCount: 0, data: [] });
    const [loading, setLoading] = useState(true);

    //we need this to get and manipulate our querystring (page, pageSize)
    const location = useLocation();
    const navigate = useNavigate();
    const queryParams = new URLSearchParams(location.search);

    //set default page and pageSize if not in the URL
    const page = Number(queryParams.get('page')) || 1; 
    const pageSize = Number(queryParams.get('pageSize')) || 10; 

    const dataUrl = new URL('mylistdata', window.location.origin);
    dataUrl.searchParams.append('page', page);
    dataUrl.searchParams.append('pageSize', pageSize);

    //function to fetch data from the server
    const populateMyList = async () => {
        const response = await fetch(dataUrl);
        const data = await response.json();
        setMyList(data);
        setLoading(false);
    };

    //calls populate when querystring changed (page, pageSize)
    useEffect(() => {
        populateMyList();
    }, [location.search]); 

    //event handler to move to the previous page
    const goToPrevPage = () => {
        const params = new URLSearchParams();
        if(page > 1) {
            params.set('page', page - 1);
            params.set('pageSize', pageSize);
            navigate(`?${params.toString()}`);
        }
    };

    //event handler to move to the next page
    const goToNextPage = () => {
        const params = new URLSearchParams();
        params.set('page', page + 1);
        params.set('pageSize', pageSize);
        navigate(`?${params.toString()}`);
    };

    //this will be used to determine if we can go to the previous or next page
    const hasPrevPage = page > 1;
    const hasNextPage = myList.totalCount > page * pageSize;

    //function for rendering the actual list    
    const renderMyList = (list) => (
        <ul>
            {list.map(item => (
            <li key={item.id}>{item.name}</li>
            ))}
        </ul>
    );

    return (
        <div>
            <h1 id="listLabel">My List</h1>
            {loading ? <p><em>Loading...</em>p> : renderMyList(myList.data)}
            <button onClick={goToPrevPage} disabled={!hasPrevPage}>Prev</button>
            <button onClick={goToNextPage} disabled={!hasNextPage}>Next</button>
        </div>
    );
}