react js i am trying to make a pagination

Question

i am trying to make a pagination and filter based on experience i want max only 10 items in a page i dont know how to get stated i have all the days dispayed and all day is now dispalyed in single page i want only 10 items in 1 page and next 10 items in next page

import { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import DocPic from "../img/doctor.png";
import InnerDetail from "./innerto_detail";
import axios from "axios";
export default function InnerSpecialities() {
 const [hasId, setHasId] = useState(false);
 const [detail, setDetail] = useState(false);
 const [data, setdata] = useState([]);
 const inipath = window.location.pathname;
 const id_path = inipath.split("/cdoctor/details");
 const path = inipath.split("/cdoctor/");
 useEffect(() => {
   const pathname = window.location.pathname;
   const doctorId = pathname.split("/")[2];
   console.log("this is the ", doctorId);
   console.log(id_path);
   const substring = "detiled";
   console.log(inipath.includes(substring));
   if (inipath.includes(substring) === true) {
     setDetail(true);
   }
   const config = {
     headers: {
       Authorization: `token ` + localStorage.getItem("token"),
     },
   };

   axios
     .get(
       "filter/?speciality=" +
         path[1],
       config
     )
     .then((res) => {
  
       var somevariable = res;
       setdata((data) => {
         return [...data, somevariable];
       });

       setdata(res.data);
      
     });
 }, []);

 function OpenInner() {
   setDetail(true);
 }

 return (
   <>
     {detail ? (
       
     ) : (
       

         
           
          

             
               Sort By:
               {" "}
             
             
               Gender:
               {" "}
             
             
               Experience:
               {" "}
             
             
               Language:
               {" "}
             
           

           
             {data.map((personData, key) => {
               return (
                 
                   
                     
                       
                       

                       
                       

                       Online
                     
                     
                       
                         Dr {personData.firstname} 
                         {personData.lastname}
                       
                       

                       
                         {" "}
                         {personData.speciality} |{personData.experience}
                          years Exp.
                       
                       

                       You Pay
                       

                       $600
                       

                       
                         {personData.qualification}
                         {personData.location}
                       
                     
                   
                   
                     
                   
                 
               );
             })}
           
           

         

           
             
               
                 {" "}
                 {" "}
               
               1
               2
               3
               4
               5
               6
               7
               
                 {" "}
                 {" "}
               
             

             
           
         
       
     )}
   
 );
}

i am trying to make a pagination and filter based on experience i want max only 10 items in a page i dont know how to get stated i have all the days dispayed and all day is now dispalyed in single page i want only 10 items in 1 page and next 10 items in next page

user_8370370 · Answer

Have state variables for loading and the page count,

const [data, setData] = useState([]);
const [loading, setLoading] = useState(false);
const [currentPage, setCurrentPage] = useState(1); 
const [dataPerPage, setDataPerPage] = useState(10); // 10 items needed per page

Your API call response should set the loading status after the setData()

useEffect(()=>{
 function getData(){

       setLoading(true);  // until the response is available, user will see loader
        axios
             .get(
               "filter/?speciality=" +
                 path[1],
               config
             )
             .then((res) => {
          
               var somevariable = res;
               setdata(res.data);
               setLoading(false);
       
             }).catch(....)
     }
       
getData();

},[])

Here is the pagination logic,

const indexOfLastdata = currentPage * dataPerPage; // 1 * 10   
const indexOfFirstData = indexOfLastdata - dataPerPage; 
const currentData = posts.slice(indexOfFirstData, indexOfLastData);

First page index will be index of last data minus the number of data you want to allow per page, when this is zero, its first page, if its 10 then its second page and so on. You'll control this through the current page number on click of next/number of the page.

Example pagination component below will take total data available, the posts allowed per page and paginate function as props.

const Pagination = ({dataPerPage, totalData, paginate}) => {
    
        const pageNumbers = [];
    
        for(let i=1; i<= Math.ceil(totaldata/dataPerPage); i++){
            pageNumbers.push(i);
        }
    
        return (
          
              
                  {pageNumbers.map(number=>{
                      return 
                          paginate(number) } className={currentPage===number ? "active": ""}>
                             {number}
                         
                      
                  })}
              
          
        );
    };

In your component,

I have created a codesandbox with a working example for you here.

https://codesandbox.io/s/mutable-water-msoy9

user_2063635 · Answer

You need to set the pageCount and pageSize variables. Page size would be 10 in your case. Based on the current current page index, you need to extract that part of your data array and render on that page.

react js i am trying to make a pagination

2 Answers