diligent-next/components/pagination/react-query/PaginationComponentRQ.jsx

import { useState } from 'react';
import { usePagination } from '../../../hooks/use-pagination';

const PaginationComponentRQ = () => {
  const [pageIndex, setPageIndex] = useState(1);

  const { data: paginationData } = usePagination(pageIndex);

  return (
    <div>
      {paginationData?.data.map((item) => (
        <div key={item._id}>{item.name}</div>
      ))}
      <button
        disabled={pageIndex === 1}
        onClick={() => setPageIndex(pageIndex - 1)}
      >
        Previous
      </button>
      <button
        disabled={pageIndex * 5 > paginationData?.dataCount}
        onClick={() => setPageIndex(pageIndex + 1)}
      >
        Next
      </button>
    </div>
  );
};

export default PaginationComponentRQ;