Pagination in React with First Next Previous Last

user_4235011 0
Viewed 1050

Am struggling little bit on introducing pagination in my react code.

Here is the code i tried, Please help me to add pagination to my list

    function App() {
  const [offset, setOffset] = useState(0);
  const [data, setData] = useState([]);
  const [perPage] = useState(12);
  const [pageCount, setPageCount] = useState(0);
  const [fullData, setFullData] = useState([]);

  const getData = async () => {
    const res = await axios.get(`https://jsonplaceholder.typicode.com/todos`);
    setFullData(res.data.items);
    const data = res.data.items;
    const slice = data.slice(offset, offset + perPage);
    setData(slice);
    setPageCount(Math.ceil(data.length / perPage));
  };
  const handlePageClick = e => {
    const selectedPage = e.selected;
    setOffset(selectedPage + 1);
    const slice = fullData.slice(perPage, offset + 12);
    setData(slice);
  };

  useEffect(() => {
    getData();
  }, []);

  return (
    <div className="App">
      <Grid
        container
        spacing={2}
        direction="row"
        justify="flex-start"
        alignItems="flex-start"
      >
        {data &&
          data.length > 0 &&
          data.map((cardInfo, i) => {
            return (
              <div>
                <Grid
                  item
                  xs={12}
                  sm={6}
                  md={3}
                  lg
                  xl
                  direction="row"
                  justify="flex-start"
                  alignItems="flex-start"
                >
                  <Card data={cardInfo} />
                </Grid>
              </div>
            );
          })}
      </Grid>
      <ReactPaginate
        previousLabel={'prev'}
        nextLabel={'next'}
        breakLabel={'...'}
        breakClassName={'break-me'}
        pageCount={pageCount}
        marginPagesDisplayed={12}
        pageRangeDisplayed={2}
        onPageChange={handlePageClick}
        containerClassName={'pagination'}
        subContainerClassName={'pages pagination'}
        activeClassName={'active'}
      />
    </div>
  );
}

Can you guys please help with pagination for same I tried many ways , but not getting exact way , if you guys can help me to get net set of data appending to the old list .

What exactly am looking forward is on page load am having 12 records and again when i click pagination , say button 2, i will get another fresh 12 records that will get appended to existing list , and so on , like wise if i click button1 , only first 12 records should be visible

reactjs
1 Answers

Just make use of React-Paginate Library

import ReactPaginate from 'react-paginate';

its pretty easy and straightforward

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import ReactPaginate from 'react-paginate';
import './App.css';
import Card from './Card';
import { apiUrl } from './constants';
import { Grid } from '@material-ui/core';

function CardContainer() {
  const [data, setData] = useState([]);
  const [perPage] = useState(10);
  const [pageCount, setPageCount] = useState(0);
  const [fullData, setFullData] = useState([]);

  const getData = async () => {
    const res = await axios.get(apiUrl);
    setFullData(res.data.items);
    const data = res.data.items.slice(0, 10);
    setPageCount(Math.ceil(res.data.items.length / perPage));
    setData(data);
  };
  const handlePageClick = ({ selected }) => {
    const pagesVisited = selected * perPage;
    const lastSetData = pagesVisited + perPage;
    setData(fullData.slice(pagesVisited, lastSetData));
    window.scrollTo(0, 0);
  };

  useEffect(() => {
    getData();
  }, []);

  return (
    <div className="App">
      <Grid
        container
        spacing={2}
        direction="row"
        justify="flex-start"
        alignItems="flex-start"
      >
        {data &&
          data.length > 0 &&
          data.map((cardInfo, i) => {
            return (
              <div>
                <Grid
                  item
                  xs={12}
                  sm={6}
                  md={3}
                  lg
                  xl
                  direction="row"
                  justify="flex-start"
                  alignItems="flex-start"
                >
                  <Card data={cardInfo} key={i} />
                </Grid>
              </div>
            );
          })}
      </Grid>
      <ReactPaginate
        previousLabel={'prev'}
        nextLabel={'next'}
        breakLabel={'...'}
        breakClassName={'break-me'}
        pageCount={pageCount}
        onPageChange={handlePageClick}
        containerClassName={'pagination'}
        subContainerClassName={'pages pagination'}
        activeClassName={'active'}
      />
    </div>
  );
}

export default CardContainer;
user_42350110
Related