Build a React.js Paginated Table to Fetch Data From JSONPlaceholder API Using react-paginate in JSX

App.jsx

import React, { useEffect, useState } from "react";
import ReactPaginate from "react-paginate";
import Table from "react-bootstrap/Table";
import "bootstrap/dist/css/bootstrap.min.css";

function App() {
  const [posts, setPosts] = useState([]);

  const [currentPage, setCurrentPage] = useState(0);

  const postsPerPage = 10;

  const offset = currentPage * postsPerPage;
  const currentPosts = posts.slice(offset, offset + postsPerPage);
  const pageCount = Math.ceil(posts.length / postsPerPage);

  // load the data

  useEffect(() => {
    const fetchPosts = async () => {
      try {
        const response = await fetch(
          "https://jsonplaceholder.typicode.com/posts"
        );

        const data = await response.json();

        console.log(data);

        setPosts(data);
      } catch (error) {
        console.log(error);
      }
    };

    fetchPosts();
  }, []);

  // when your page changes

  const handlePageClick = ({ selected }) => {
    setCurrentPage(selected);
  };

  return (
    <div className="container mt-5">
      <h2 className="mb-4">Posts Table</h2>
      <Table striped bordered hover>
        <thead>
          <th>ID</th>
          <th>Title</th>
          <th>Body</th>
        </thead>
        <tbody>
          {currentPosts.map((post) => (
            <tr key={post.id}>
              <td>{post.id}</td>
              <td>{post.title}</td>
              <td>{post.body}</td>
            </tr>
          ))}
        </tbody>
      </Table>
      <ReactPaginate
        previousLabel={"Previous"}
        nextLabel={"Next"}
        breakLabel={"..."}
        pageCount={pageCount}
        marginPagesDisplayed={2}
        pageRangeDisplayed={5}
        onPageChange={handlePageClick}
        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>
  );
}

export default App;

import React, { useEffect, useState } from "react";

import ReactPaginate from "react-paginate";

import Table from "react-bootstrap/Table";

import "bootstrap/dist/css/bootstrap.min.css";

function App() {

const [posts, setPosts] = useState([]);

const [currentPage, setCurrentPage] = useState(0);

const postsPerPage = 10;

const offset = currentPage * postsPerPage;

const currentPosts = posts.slice(offset, offset + postsPerPage);

const pageCount = Math.ceil(posts.length / postsPerPage);

// load the data

useEffect(() => {

const fetchPosts = async () => {

try {

const response = await fetch(

"https://jsonplaceholder.typicode.com/posts"

);

const data = await response.json();

console.log(data);

setPosts(data);

} catch (error) {

console.log(error);

}

};

fetchPosts();

}, []);

// when your page changes

const handlePageClick = ({ selected }) => {

setCurrentPage(selected);

};

return (

<h2 className="mb-4">Posts Table</h2>

<thead>

<th>Title</th>

</thead>

<tbody>

{currentPosts.map((post) => (

<td>{post.title}</td>

</tr>

))}

</tbody>

</Table>

<ReactPaginate

previousLabel={"Previous"}

nextLabel={"Next"}

breakLabel={"..."}

pageCount={pageCount}

marginPagesDisplayed={2}

pageRangeDisplayed={5}

onPageChange={handlePageClick}

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>

);

}

export default App;

Build a React.js Paginated Table to Fetch Data From JSONPlaceholder API Using react-paginate in JSX

Comments

Leave a Reply Cancel reply

Archives