Question:
How to make next and previous button in pagination component work?

Solution

Implementing next and previous buttons in a pagination component typically involves managing the current page state and updating it when users click on the respective buttons. 


You might not being able to do this because firstIndex and lastIndex are not initialized with React.useState, therefore the component doesn't rerender. You can't do:

lastIndex = currentPage * countPerPage;

firstIndex = lastIndex - countPerPage;


Your usage of currentPage is correct.  So, change the syntax to the following:

const [firstIndex, setFirstIndex] = React.useState(0);

const [lastIndex, setLastIndex] = React.useState(0);

. . .

setFirstIndex(. . .);

setLastIndex(. . .);


Here is the complete working code for this:

import * as React from "react";

import "./styles.css";


const countPerPage = 5;

export default () => {

  const [users, setUsers] = React.useState([]);

  const [slicedUsers, setSlicedUsers] = React.useState([]);


  const [currentPage, setCurrentPage] = React.useState(1);


  const [firstIndex, setFirstIndex] = React.useState(0);

  const [lastIndex, setLastIndex] = React.useState(countPerPage);


  const [allPageCount, setAllPageCount] = React.useState(0);


  const [isLoading, setIsLoading] = React.useState(true);


  React.useEffect(() => {

    fetch("https://jsonplaceholder.typicode.com/posts")

      .then((res) => res.json())

      .then((users) => {

        setUsers(users);

        setLastIndex(currentPage * countPerPage);

        setFirstIndex(lastIndex - countPerPage);

        setSlicedUsers(users.slice(firstIndex, lastIndex));

        setAllPageCount(Math.floor(users.length / countPerPage));

        setIsLoading(false);

      });

  }, []);


  const paginationController = (e, value) => {

    setCurrentPage(value);

    setLastIndex(currentPage * countPerPage);

    setFirstIndex(currentPage * countPerPage - countPerPage);

    setSlicedUsers(users.slice(firstIndex, lastIndex));

  };


  return (

    <>

      

users:{users.length}

      

slicedUsers:{slicedUsers.length}

      

currentPage:{currentPage}

      

lastIndex:{lastIndex}

      

firstIndex:{firstIndex}

      

    

  );

};


Moreover, you can also utilize useEffect to make changes in currentPage and re-slice the users array whenever the page changes:


useEffect(() => {

  const newFirstIndex = (currentPage - 1) * countPerPage;

  const newLastIndex = currentPage * countPerPage;


  setSlicedUsers(users.slice(newFirstIndex, newLastIndex));

}, [currentPage, users, countPerPage]);


by adding another useEffect hook, the current page state change triggers the effect, and handles slicing the data accordingly.


doing this we have to remove the direct calls to setSlicedUsers from both the pagination controller and the fetch effect to avoid duplicates.


In that case, the whole code will look like this:

import React, { useState, useEffect } from "react";

import {

  Container,

  CircularProgress,

  TableContainer,

  Paper,

  Table,

  TableHead,

  TableCell,

  TableBody,

  TableRow,

  Pagination

} from '@mui/material';


function App() {

  const [users, setUsers] = useState([]);

  const [slicedUsers, setSlicedUsers] = useState([]);

  const countPerPage = 5;

  const [currentPage, setCurrentPage] = useState(1);

  const [allPageCount, setAllPageCount] = useState(0);

  const [isLoading, setIsLoading] = useState(true);


  useEffect(() => {

    fetch("https://jsonplaceholder.typicode.com/posts")

      .then((res) => res.json())

      .then((data) => {

        setUsers(data);

        setAllPageCount(Math.ceil(data.length / countPerPage));

        setIsLoading(false);

      });

  }, []);


  useEffect(() => {

    const newFirstIndex = (currentPage - 1) * countPerPage;

    const newLastIndex = currentPage * countPerPage;

    setSlicedUsers(users.slice(newFirstIndex, newLastIndex));

  }, [currentPage, users, countPerPage]);


  const paginationController = (e, value) => {

    setCurrentPage(value);

  };


  return (

    

      sx={{

        display: "flex",

        flexDirection: "column",

        gap: "10px",

        height: "100svh",

        justifyContent: "center",

        alignItems: "center",

      }}

    >

      {isLoading ? (

        

      ) : (

        <>

          

            component={Paper}

            sx={{ boxShadow: "0 0 12px #15544b" }}

          >

            

              

                

                  ID

                  Title

                  Body

                

              

              

                {slicedUsers.map((user) => (

                  

                    {user.id}

                    {user.title}

                    {user.body}

                  

                ))}

              

            

          

          

            count={allPageCount}

            color="primary"

            onChange={paginationController}

          />

        

      )}

    

  );

}


export default App;


This example assumes you have a content section (

) with items that you want to paginate. Adjust the itemsPerPage variable to control how many items appear on each page. The pagination buttons are dynamically generated based on the number of items.


The showItems(), changePage(page), nextPage(), and prevPage() functions handle showing or hiding items and updating the current page accordingly. The onclick attributes in the HTML call these functions when the user clicks on the pagination buttons.


Answered by: >James

Credit:> StackOverflow


Suggested blogs:

>How to solve encoding issue when writing to a text file, with Python?

>Step by Step guide to Deploy Terraform in Azure using GitHub Actions

>Testing react components using Hooks and Mocks

>Use Firebase Realtime Database with ASP.NET MVC App

>Use of Singletons in .NET Core in AWS Lambda

>What are common syntax errors and exceptions in Python

>What are the steps to fix error while downloading PDF file- Python

>How to do PHP Decryption from Node.js Encryption?

>How to do PHP gd Installation on Ubuntu?

>How to do Web Scraping with Python?


Submit
0 Answers
Top Questions
27-12-2023

Setup checkbox for multiple switch on change event of Javascript

18-01-2024

How to make next and previous button in pagination component work?

10-01-2024

Process to narrow down a union return type from a function in Javascript

10-01-2024

How to display the list of items corectly and add a scrolling text slider?

09-01-2024

What is the equivalent export format for conditional static required in ES6?

Related Questions

How to include spaces between text to enter the consecutive text in next line in javascript?
img
How to Filter all item with lowest nearest value in array using javascript?
img
How to replace with hide/show div1 with div2 using onclick() and a function in JavaScript?
img
Understanding types of ‘syntax error’ in javascript
img
Process to narrow down a union return type from a function in Javascript
img

What Our Clients Say About Us

Client satisfaction is our ultimate goal. Here are some kind words of our precious clients they have used to express their satisfaction with our service.

Why Choose Us ?

We endow businesses with flexible engagement models based on their unique needs. Our strength lies in state-of-the-art technology and affordable consulting services. Try us for fast POCs, full-fledged applications, or technology consulting. Always available for your service.