Reactjs Pagination loading all elements on page load

Question

I have done pagination in Reactjs project. But now it is loading all elements on page load. When i click on second page then it gives the expected result but i need it to paginate also on the page load.

Below is the Home.js code

import React, { useState, useEffect, useParams } from "react";
import axios from "axios";
import { Link } from "react-router-dom";
import ReactPaginate from "react-paginate";

const Home = () => {
  const [users, setUser] = useState([]);
  const [pageCount, setpageCount] = useState(0);
  const [isLoaded, setisLoaded] = useState(false);
  let limit = `4`;
  // loadUsers();

  useEffect(() => {
    const loadUsers = async () => {
      const result = await axios.get(
        "https://jsonplaceholder.typicode.com/posts?_page=1&_limit=${limit}"
      );
      const data = await result.data;
      setpageCount(Math.ceil(result.data.length / limit));
      setisLoaded(true);
      setUser(data);
    };
    loadUsers();
  }, [limit]);

  const fetchData = async (currentPage) => {
    const res = await fetch(
      `https://jsonplaceholder.typicode.com/posts?_page=${currentPage}&_limit=${limit}`
    );
    const data = await res.json();
    return data;
  };

  const deleteUser = async (id) => {
    await axios.delete(`http://localhost:3003/users/${id}`);
    this.loadUsers();
  };
  const handlePageClick = async (data) => {
    let currentPage = data.selected + 1;
    const dataform = await fetchData(currentPage);
    setUser(dataform);
  };

  return (
    <div className="container">
      <div className="py-4">
        <h1>Home Page</h1>
        <table className="table border shadow">
          <thead className="thead-dark">
            <tr>
              <th scope="col">#</th>
              <th scope="col">Name</th>
              <th scope="col">User Name</th>
              <th scope="col">Email</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            {users.map((user, index) => (
              <tr key={user.id}>
                <th scope="row">{index + 1}</th>
                <td>{user.id}</td>
                <td>{user.title}</td>
                <td>{user.body}</td>
                <td>
                  <Link
                    className="btn btn-primary mr-2"
                    to={`/users/${user.id}`}
                  >
                    View
                  </Link>
                  <Link
                    className="btn btn-outline-primary mr-2"
                    to={`/users/edit/${user.id}`}
                  >
                    Edit
                  </Link>
                  <Link
                    to={""}
                    className="btn btn-danger"
                    onClick={() => deleteUser(user.id)}
                  >
                    Delete
                  </Link>
                </td>
              </tr>
            ))}
          </tbody>
        </table>

        {isLoaded ? (
          <ReactPaginate
            previousLabel={"<<"}
            nextLabel={"next"}
            breakLabel={"..."}
            pageCount={pageCount}
            marginPagesDisplayed={3}
            pageRangeDisplayed={3}
            onPageChange={handlePageClick}
            disableInitialCallback={true}
            containerClassName={"pagination justify-content-center"}
            pageClassName={"page-item"}
            pageLinkClassName={"page-link"}
            previousClassName={"page-item"}
            previousLinkClassName={"page-link"}
            nextClassName={"page-item"}
            nextLinkClassName={"page-link"}
            breakClassName={"page-item"}
            breakLinkClassName={"page-link"}
            activeClassName={"active"}
          />
        ) : (
          <div></div>
        )}
      </div>
    </div>
  );
};

export default Home;

Codesandbox: https://codesandbox.io/s/cool-easley-poezfh?file=/src/Home.js:0-3587

Answer 1

Looks like you're not setting the limit in your axios fetch correctly in loadUsers. You likely meant to use a templated string like so:

      const result = await axios.get(
        `https://jsonplaceholder.typicode.com/posts?_page=1&_limit=${limit}`
      );

but instead did

      const result = await axios.get(
        "https://jsonplaceholder.typicode.com/posts?_page=1&_limit=${limit}"
      );

Using " instead of ` means that the limit variable doesn't get inlined, so it fetched all data.