score:1

Accepted 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 (
          <nav>
              <ul classname="ur style class for nav">
                  {pagenumbers.map(number=>{
                      return <li key={number}>
                         <a onclick={ () => paginate(number) } classname={currentpage===number ? "active": ""}>
                             {number}
                         </a>
                      </li>
                  })}
              </ul>
          </nav>
        );
    };

  

in your component,

return (
            <div>
                <data data={currentdata} loading={loading}/>
                <pagination dataperpage={dataperpage} totaldata={data.length} paginate={handlepaginate}/>
            </div>
    
        )
    

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

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

score:1

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.


Related Query

More Query from same tag