Membuat Metode Pagination dengan React Paginate

Tulisan ini dibuat setelah saya mencoba mencari tahu tentang cara membuat pagination atau paginasi untuk project yang sedang saya kerjakan. Project yang sedang saya kerjakan saat ini dibangun dengan menggunakan React. Kemudian saya menemukan sebuah artikel di medium dan mencoba untuk membuat ulang berdasarkan yang disebutkan pada artikel tersebut.

Pada artikel yang saya temukan, caranya dijelaskan dalam dua konsep yakni dengan menggunakan class component dan functional component. Disini saya akan mencoba untuk menjelaskan yang menggunakan functional component saja, sesuai dengan yang saya gunakan pada project saya.

Requirements

• axios
• react-paginate

Steps

Langkah pertama yang dilakukan sudah pasti membuat project baru dengan menggunakan create-react-app dan menginstall axios serta react-paginate.

npx create-react-app pagination-app

npm install axios react-paginate

Kemudian buat file baru dengan nama PaginationPlayground atau apapun yang ada di kepala kalian dan import hooks serta modul yang dibutuhkan yaitu react-paginate dan axios.

import React, { useState, useEffect } from "react";
import axios from "axios";
import ReactPaginate from "react-paginate";

Setelah itu buat functional component dan buat beberapa state menggunakan useState hook di dalamnya.

const [offset, setOffset] = useState(0);
const [data, setData] = useState([]);
const [perPage] = useState(5);
const [pageCount, setPageCount] = useState(0);

Jadi variabel offset digunakan untuk menentukan offset, variabel data untuk menyimpan data yang diambil dari dummy API, variabel perPage untuk menentukan jumlah item yang akan ditampilkan dalam satu halaman, dan yang terakhir adalah pageCount yang digunakan untuk menyimpan nilai jumlah halaman berdasarkan data yang didapat dibagi jumlah data yang ditampilkan dalam satu halaman.

Kemudian buat fungsi getData untuk load data yang diambil dari dummy API secara asinkronus menggunakan Axios. Dummy API-nya disini menggunakan JSONPlaceholder API, data yang akan diambil berupa 5000 gambar yang dibungkus dalam sebuah array. Di bawah ini adalah baris kode yang ada di dalam fungsi getData.

const getData = async () => {
  const res = await axios.get(`https://jsonplaceholder.typicode.com/photos`);
  const data = res.data;

  const slicedData = data.slice(offset, offset + perPage);
  const postData = slicedData.map(pd => (
    <div key={pd.id}>
      <p>{pd.title}</p>
      <img src={pd.thumbnailUrl} alt={pd.title} />
    </div>
  ));
  setData(postData);
  setPageCount(Math.ceil(data.length / perPage));
};

Operasi yang dilakukan pada fungsi getData diawali dengan fetching data menggunakan axios dan setelah mendapatkan data selanjutnya passing data ke dalam variabal data. Setelah itu, menggunakan array.slice milik javascript untuk slicing data tersebut, kurang lebih keterangan operasinya adalah seperti ini 5000array.slice(0, 0 + 10).

Setelah slicing data, selanjutnya adalah me-looping data tersebut menggunakan array.map milik javascript untuk memasukkan data tersebut ke dalam variabel postData. Fungsi getData juga mengupdate state dari variabel data menggunakan setData dengan variabel postData sebagai parameter.

Serta mengupdate state dari pageCount menggunakan setPageCount yang berisi sebuah fungsi yakni Math.ceil(5000/5).

Setelah selesai dibuat, kemudian fungsi getData dipanggil di dalam useEffect.

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

Lalu membuat fungsi untuk menghandle event ketika menekan tombol prev dan next pada paginasi dibuat yaitu handlePageClick.

const handlePageClick = e => {
  const selectedPage = e.selected;
  setOffset(selectedPage * perPage);
};

Fungsi ini akan mengupdate state dari offset, caranya adalah mengalikan nilai dari selectedPage dengan nilai dari perPage pada setiap klik yang dilakukan menggunakan setOffset.

Langkah selanjutnya yang dilakukan adalah me-return state dari variabel data dan membuat tag ReactPaginate yang sebelumnya diimport dari react-paginate.

return (
  <div className="App">
    {data}
    <ReactPaginate
      previousLabel={"prev"}
      nextLabel={"next"}
      breakLabel={"..."}
      breakClassName={"break-me"}
      pageCount={pageCount}
      marginPagesDisplayed={2}
      pageRangeDisplayed={5}
      onPageChange={handlePageClick}
      containerClassName={"pagination"}
      subContainerClassName={"pages pagination"}
      activeClassName={"active"}
    />
  </div>
);

Lastly, import dan deklarasikan komponen pagination yang sudah dibuat ini di dalam file app.js. Jalankan project ini di local environment dengan mengeksekusi perintah npm start pada terminal kesayangan dan silahkan lihat hasilnya di browser kesayanganmu.

Itu tadi adalah langkah-langkah dalam membuat fitur paginasi atau pagination di dalam React dengan bantuan modul react-paginate pada functional component. Thanks udah baca sampe abis, kalo masih bingung bisa langsung dm aja di sini buat diskusi lebih lanjut. Have a nice day!