Paging in react

good morning, how are you? I’m having a problem with pagination, when I click to change the page it appears the page results and goes back to the first one right away, would you know how to help me?

For example, if I click on page 2, its results appear but it immediately goes back to page 1, I don’t know if it can be route or something like that

Dear, every time I click on a button it refreshes the page, I can’t say if it could be route

import Table from "react-bootstrap/Table";
import axios from "axios";
import { Link } from "react-router-dom";
import { useState, useEffect } from "react";
import Form from "react-bootstrap/Form";
import Search from "../components/Search";
import Pagination from "../components/Pagination";

const endpoint = "http://localhost:8000/api";
const AccountShow = () => {
  const [accounts, setAccounts] = useState([]);

  const keys = [
    "nome",
    "razaoSocial",
    "statusConta",
    "setor",
    "segmentoAtuacao",
    "naturezaJuridica",
  ];
  const [query, setQuery] = useState("");

  const [currentPage, setCurrentPage] = useState(1);
  const [accountsPerPage] = useState(5);
  const indexOfLastAccount = currentPage * accountsPerPage;
  const indexOFirstAccount = indexOfLastAccount - accountsPerPage;
  const currentAccounts = accounts.slice(
    indexOFirstAccount,
    indexOfLastAccount
  );
  const paginate = (pageNumber) => setCurrentPage(pageNumber);
  useEffect(() => {
    getAllAccounts();
  }, []);

  const getAllAccounts = async () => {
    const response = await axios.get(`${endpoint}/accounts`);
    setAccounts(response.data);
  };

  const deleteAccount = async (id) => {
    await axios.delete(`${endpoint}/account/${id}`);
    getAllAccounts();
  };

  return (
    <div className="d-grid gap-2">
      <div className="row">
        <div className="col-8">
          <Form className="d-flex m-1">
            <Form.Control
              type="text"
              placeholder="Filtro"
              className="me-2"
              aria-label="Search"
              onChange={(e) => setQuery(e.target.value)}
            />
          </Form>
        </div>
        <div className="col-4">
          <Link
            to="/account/create"
            className="col-11 btn btn-outline-primary m-1 "
          >
            Create
          </Link>
        </div>
      </div>
      <Table hover className="">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th className="col-2" scope="col">
              Nome
            </th>
            <th className="col-2" scope="col">
              Razão Social
            </th>
            <th scope="col">Status da Conta</th>
            <th scope="col">Setor</th>
            <th scope="col">Segmento Atuacao</th>
            <th scope="col">Natureza Juridica</th>
            <th scope="col">Capital</th>
            <th scope="col">Funcionarios</th>
            <th className="text-center" scope="col">
              Ações
            </th>
          </tr>
        </thead>
        <tbody>
          {Search(currentAccounts, query, keys).map((account) => (
            <tr key={account.id}>
              <th>{account.id}</th>
              <td>{account.nome}</td>
              <td>{account.razaoSocial}</td>
              <td>{account.statusConta}</td>
              <td>{account.setor}</td>
              <td>{account.segmentoAtuacao}</td>
              <td>{account.naturezaJuridica}</td>
              <td>{account.capital}</td>
              <td>{account.funcionarios}</td>
              <td className="text-center">
                <Link
                  to={`edit/${account.id}`}
                  className="btn btn-outline-warning"
                >
                  Editar
                </Link>
                <button
                  onClick={() => deleteAccount(account.id)}
                  className="btn btn-outline-danger m-1"
                >
                  Deletar
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </Table>
      <Pagination
        dadosPorPagina={accountsPerPage}
        totalDados={accounts.length}
        paginate={paginate}
      />
    </div>
  );
};

export default AccountShow;

I will leave my paginator component next

import React from "react";

const Pagination = ({ dadosPorPagina, totalDados, paginate }) => {
  const pageNumbers = [];

  for (
    let index = 1;
    index <= Math.ceil(totalDados / dadosPorPagina);
    index++
  ) {
    pageNumbers.push(index);
  }

  return (
    <div>
      <nav>
        <ul className="pagination">
          {pageNumbers.map((number) => (
            <li key={number} className="page-item">
              <a onClick={() => paginate(number)} href="" className="page-link">
                {number}
              </a>
            </li>
          ))}
        </ul>
      </nav>
    </div>
  );
};

export default Pagination;

Answer

Just add one more parameter to pagination component for active page to set current page. You can pass as below

AccontShow component

<Pagination
    dadosPorPagina={accountsPerPage}
    totalDados={accounts.length}
    paginate={paginate}
    activePage={currentPage}
 />

Now in Pagination component take activePage parameter

const Pagination = ({ dadosPorPagina, totalDados, paginate, activePage }) => {//code}

Now in pageNumbers map check for current page and add css class and css styling to that ‘li’ item to display as active

<ul className="pagination">
      {pageNumbers.map((number) => (
        <li key={number} className={`page-item ${number == activePage ? 'page-item-active': ''}`}>
          <a onClick={() => paginate(number)} href="javascript:void(0)" className="page-link">
            {number}
          </a>
        </li>
      ))}
    </ul>

Here I’ve added ‘page-item-active’ class conditionally, you can change it and dd styling to that class

P.S. : Updated <a> tag from pagination component

Thanks and voteup if useful 🙂