Issue in Pagination Implementation of Reactjs Data Tables

I am implementing data Tables in reactjs and I want to implement pagination in them which allows users to select the number of rows they want to see at a time. You can see the Table UI here. (Ignore the css styling issues).

I am beginner in Reactjs and My code is messed. I am Trying to do a couple of things in order to Pagination work correctly but its not working. I tried to find and implement solution online but didn't get what exactly to do?

Here is my code and Pagination is not working. Please help me to find out the possible issues.

Bookings.js

import React, {useState, useEffect} from 'react';  import axios from 'axios';  import {Link} from 'react-router-dom';  import '../static/Bookings.css';  import {BsFilterRight} from "react-icons/bs";  import { Pagination} from "../components/Bookings";  import useFullPageLoader from "../hooks/useFullPageLoader";    let bookings_array = [];      const Bookings= ()=>{      const[bookings, setBooking]=useState([]);      const[search, setSearch]=useState("");      const[searchColumns, setSearchColumns]= useState(["consultant"]);      const [totalItems, setTotalItems] = useState(0);      const [currentPage, setCurrentPage] = useState(1);      const [itemsPerPage, setItemsPerPage]= useState(2);        function changeItemsPerPage(e){          setItemsPerPage(e.target.value);      }        useEffect(()=>{          loadUsers();      }, []);        useEffect(()=>{          if(search.length){          setBooking(                  bookings_array.filter(Booking =>                      searchColumns.some(                          (column)=> Booking[column].toString().toLowerCase().includes(search.toLowerCase())                      )                  )              )          }else{              setBooking(bookings_array)          }                    setTotalItems(bookings.length);        }, [search, bookings]);        useEffect(()=>{          setBooking(              bookings_array.slice(                  (currentPage - 1) * itemsPerPage,                  (currentPage - 1) * itemsPerPage + itemsPerPage              )          )      }, [currentPage, itemsPerPage])          const loadUsers= async()=>{          const result =await axios.get("http://localhost:3001/Bookings");          bookings_array=result.data.reverse();          setBooking(bookings_array);      };        const deleteUser=async id => {          await axios.delete(`http://localhost:3001/Bookings/${id}`);          loadUsers();      }        const columns= bookings[0] && Object.keys(bookings[0]);      return(          <div className="Booking-page-container">              <h2 className="text-center mb-4">Bookings Page</h2>              <table class="table table-bordered table-striped border shadow">                  <thead className="thead-search-filter">                  <select value={itemsPerPage} onChange={changeItemsPerPage}>                      <option value={2}>2</option>                      <option value={4}>4</option>                      <option value={6}>6</option>                      <option value={8}>8</option>                  </select>                  <Pagination                      total={totalItems}                      itemsPerPage={itemsPerPage}                      currentPage={currentPage}                      onPageChange={page => setCurrentPage(page)}                  />                      <tr>                          <th scope="col" colSpan={6}>                              <BsFilterRight/> &nbsp;                              <input className="search-field-input"                                  placeholder=" Search....."                                  onChange={e=>setSearch(e.target.value)}                              />                               {                                  columns && columns.map(column=> <span>                                  <input type="checkbox" checked={searchColumns.includes(column)}                                      onChange={(e)=>{                                          const checked= searchColumns.includes(column)                                          setSearchColumns(prev=>checked                                              ? prev.filter(sc=>sc!== column)                                              : [...prev, column]                                          );                                      }}                                  />                                      &nbsp;{column}&nbsp;                                  </span>                                   )                              }                           </th>                      </tr>                  </thead>                              <thead class="thead-dark">                      <tr>                          <th scope="col">#</th>                          <th scope="col">Name</th>                          <th scope="col">Consultant</th>                          <th scope="col">Email</th>                          <th scope="col">Phone</th>                          <th>Action</th>                      </tr>                  </thead>                  <tbody>                      {bookings.map((Booking,index)=>(                          <tr>                              <th scope="row">{index+1}</th>                              <td>{Booking.name}</td>                              <td>{Booking.consultant}</td>                              <td>{Booking.email}</td>                              <td>{Booking.phone}</td>                              <td>                                  <Link class="btn btn-primary mr-2" to={`/Bookings/view/${Booking.id}`}>View</Link>                                  <Link class="btn btn-outline-primary mr-2" to={`/Bookings/edit/${Booking.id}`}>Edit</Link>                                  <Link class="btn btn-danger" onClick={()=>deleteUser(Booking.id)}>Delete</Link>                              </td>                          </tr>                         ))}                  </tbody>                  {console.log(totalItems)}                  {console.log(itemsPerPage)}              </table>          </div>      );  };    export default Bookings;  

Here is the index.js of Pagination imported from "../components/Bookings"

import React, { useEffect, useState, useMemo } from "react";  import Pagination from "react-bootstrap/Pagination";    const PaginationComponent = ({      total = 0,      itemsPerPage = 10,      currentPage = 1,      onPageChange  }) => {      const [totalPages, setTotalPages] = useState(0);        useEffect(() => {          if (total > 0 && itemsPerPage > 0)              setTotalPages(Math.ceil(total / itemsPerPage));      }, [total, itemsPerPage]);        const paginationItems = useMemo(() => {          const pages = [];            for (let i = 1; i <= totalPages; i++) {              pages.push(                  <Pagination.Item                      key={i}                      active={i === currentPage}                      onClick={() => onPageChange(i)}                  >                      {i}                  </Pagination.Item>              );          }            return pages;      }, [totalPages, currentPage]);        if (totalPages === 0) return null;        return (          <Pagination>              <Pagination.Prev                  onClick={() => onPageChange(currentPage - 1)}                  disabled={currentPage === 1}              />              {paginationItems}              <Pagination.Next                  onClick={() => onPageChange(currentPage + 1)}                  disabled={currentPage === totalPages}              />          </Pagination>      );  };    export default PaginationComponent;  

https://stackoverflow.com/questions/66593614/issue-in-pagination-implementation-of-reactjs-data-tables March 12, 2021 at 11:07AM