{ "componentChunkName": "component---src-templates-blog-post-js", "path": "/implement-pagination-search-and-filter-in-a-react-app-part-3/", "result": {"data":{"markdownRemark":{"html":"
This blog post is part of a series. You must complete part-1 & part-2 before continuing here.
\n

In part-2, we implemented search functionality in our application. The last feature that is pending is pagination, which we are going to implement in this post.

\n

Inside the components folder, create a file called Pagination.js.

\n

We will use Bootstrap's pagination component. In addition, we will also show Previous and Next links.

\n
src/components/Pagination.js
\n
import React from "react";\nimport _ from "lodash";\n\nconst Pagination = ({\n  noOfPosts,\n  postsPerPage,\n  onPageChange,\n  currentPage,\n  onPreviousClick,\n  onNextClick,\n}) => {\n\n  const noOfPages = Math.ceil(noOfPosts.length / postsPerPage);\n  const pages = _.range(1, noOfPages + 1);\n\n  if (noOfPages === 1) return null;\n\n  return (\n    <nav>\n      <ul className="pagination">\n        {currentPage !== 1 && (\n          <li className="page-item">\n            <a\n              className="page-link"\n              style={{ cursor: "pointer" }}\n              onClick={onPreviousClick}\n            >\n              Previous\n            </a>\n          </li>\n        )}\n\n        {pages.map((page) => (\n          <li\n            key={page}\n            className={page === currentPage ? "page-item active" : "page-item"}\n          >\n            <a\n              className="page-link"\n              style={{ cursor: "pointer" }}\n              onClick={() => onPageChange(page)}\n            >\n              {page}\n            </a>\n          </li>\n        ))}\n        {currentPage !== noOfPages && (\n          <li className="page-item">\n            <a\n              className="page-link"\n              style={{ cursor: "pointer" }}\n              onClick={onNextClick}\n            >\n              Next\n            </a>\n          </li>\n        )}\n      </ul>\n    </nav>\n  );\n};\n\nexport default Pagination;
\n

Let's understand the code we have written inside the Pagination component.

\n

LINE 13-14: We determine the total no of links in the pagination by dividing the total no. of posts with the no. of posts that we decide to display on a single page. We have 10 posts in total and we have decided to display 4 posts per page. So we end up with 2.5 (10/4) links, which doesn't make any sense. So, we round this number upwards to its nearest integer using the Math.ceil() method. Math.ceil(10/4) gives us 3, which we then convert to an array using the _.range method from lodash.

\n

LINE 16: If we have only one page in our application (which will be true if we have, let's say, 3 posts in total), we will not show any pagination.

\n

The rest of the code should be easy to understand. Note that we decide to show the Previous link whenever we click on any page except page no 1. Similarly, we show the Next link whenever we click on any page except the last page.

\n

Next, we will render the Pagination component inside the App component. Add the highlighted code snippets in the App.js file.

\n
src/App.js
\n
import React, { useState } from "react";\nimport Posts from "./components/Posts";\nimport Categories from "./components/Categories";\nimport { useDispatch, useSelector } from "react-redux";\nimport { filterPosts } from "./components/blog-state";\nimport SearchBar from "./components/SearchBar";\nimport Pagination from "./components/Pagination";\n\nconst App = () => {\n  const { posts } = useSelector((state) => state.blog);\n\n  const [filter, setFilter] = useState(false);\n  const [currentCategory, setCurrentCategory] = useState("");\n  const [searchQuery, setSearchQuery] = useState("");\n  const [currentPage, setCurrentPage] = useState(1);\n  const [postsPerPage, setPostsPerPage] = useState(4);\n\n  // Category filter\n  const dispatch = useDispatch();\n\n  const categoryChangeHandler = (category) => {\n    setCurrentCategory(category);\n    setCurrentPage(1);\n    if (category === "All Categories") {\n      setFilter(false);\n    } else {\n      setSearchQuery("");\n      dispatch(filterPosts(category));\n      setFilter(true);\n    }\n  };\n\n  //End of category filter\n\n  //Search\n\n  const searchChangeHandler = (query) => {\n    setCurrentCategory("");\n    setFilter(false);\n    setSearchQuery(query);\n  };\n\n  // End of search\n\n  // Pagination\n\n  const previousClickHandler = () => {\n    setCurrentPage(currentPage - 1);\n  };\n\n  const nextClickHandler = () => {\n    setCurrentPage(currentPage + 1);\n  };\n\n  const pageChangeHandler = (page) => {\n    setCurrentPage(page);\n  };\n\n  // End of pagination\n\n  return (\n    <div className="container">\n      <div className="row row-one justify-content-center">\n        <SearchBar value={searchQuery} onChange={searchChangeHandler} />\n      </div>\n      <div className="row justify-content-center mb-3">\n        <div className="title col-md-6">\n          <Posts\n            filter={filter}\n            searchQuery={searchQuery}\n          />\n        </div>\n        <div className="category col-md-2">\n          <Categories\n            currentCategory={currentCategory}\n            categoryChangeHandler={categoryChangeHandler}\n          />\n        </div>\n      </div>\n      <div className="row">\n        <div className="col offset-md-2">\n          {!searchQuery && !filter && (\n            <Pagination\n              currentPage={currentPage}\n              postsPerPage={postsPerPage}\n              noOfPosts={posts}\n              onPreviousClick={previousClickHandler}\n              onNextClick={nextClickHandler}\n              onPageChange={pageChangeHandler}\n            />\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\nexport default App;\n
\n

We keep track of the current page in the currentPage variable. Clicking on the Next and Previous links will trigger nextPageHandler and previousPageHandler functions respectively, which will then add or subtract 1 from the value of currentPage.

\n

Note that we don't show any pagination if we have applied a category filter or our search query is not an empty string.

\n

With this, we have the pagination component ready.

\n

\n \n posts array which contains 10 blog posts. To fix this, we will paginate the posts array.

\n

In the components folder, create a folder named utils and inside the utils folder, create a file named paginate.js.

\n
src/utils/paginate.js
\n
import _ from "lodash";\n\nexport const paginate = (totalPosts, pageNumber, pageSize) => {\n  const startIndex = (pageNumber - 1) * pageSize;\n  return _(totalPosts).slice(startIndex).take(pageSize).value();\n};
\n

Then, we import the paginate() function inside the Posts.js component and create a paginatedPosts array by passing in the required arguments to the paginate() function.

\n

Add the highlighted code snippets in the Posts.js file.

\n
src/components/Posts.js
\n
import React from "react";\nimport { useSelector } from "react-redux";\nimport { paginate } from "../utils/paginate";\n\nconst Posts = ({ filter, searchQuery, pageNumber, pageSize }) => {\n  const { posts } = useSelector((state) => state.blog);\n  const { filteredPosts } = useSelector((state) => state.blog);\n\n  let searchResult;\n  if (searchQuery) {\n    searchResult = posts.filter((post) =>\n      post.title.toLowerCase().includes(searchQuery.toLowerCase())\n    );\n  }\n\n  const paginatedPosts = paginate(posts, pageNumber, pageSize);\n\n  return (\n    <>\n      <p>\n        showing{" "}\n        {filter\n          ? filteredPosts.length\n          : searchQuery\n          ? searchResult.length\n          : paginatedPosts.length}{" "}\n        posts of total {posts.length} posts\n      </p>{" "}\n      <div>\n        {!filter &&\n          !searchQuery &&\n          paginatedPosts.map((post) => (\n            <article key={post.id}>\n              <h2> {post.title}</h2>\n            </article>\n          ))}\n        {filter &&\n          filteredPosts.map((post) => (\n            <article key={post.id}>\n              <h2> {post.title}</h2>\n            </article>\n          ))}\n        {searchQuery &&\n          searchResult.map((post) => (\n            <article key={post.id}>\n              <h2> {post.title}</h2>\n            </article>\n          ))}\n      </div>\n    </>\n  );\n};\n\nexport default Posts;
\n

Finally, we have to pass the pageNumber & pageSize props to the Posts component rendered inside the App component.

\n

Add the highlighted code snippets in the App.js file.

\n
src/App.js
\n
import React, { useState } from "react";\nimport Posts from "./components/Posts";\nimport Categories from "./components/Categories";\nimport { useDispatch, useSelector } from "react-redux";\nimport { filterPosts } from "./components/blog-state";\nimport SearchBar from "./components/SearchBar";\nimport Pagination from "./components/Pagination";\n\nconst App = () => {\n\n\n// rest of the code\n\n\n  return (\n    <div className="container">\n      <div className="row row-one justify-content-center">\n        <SearchBar value={searchQuery} onChange={searchChangeHandler} />\n      </div>\n      <div className="row justify-content-center mb-3">\n        <div className="title col-md-6">\n          <Posts\n            filter={filter}\n            searchQuery={searchQuery}\n            pageNumber={currentPage}\n            pageSize={postsPerPage}\n          />\n        </div>\n        <div className="category col-md-2">\n          <Categories\n            currentCategory={currentCategory}\n            categoryChangeHandler={categoryChangeHandler}\n          />\n        </div>\n      </div>\n      <div className="row">\n        <div className="col offset-md-2">\n          {!searchQuery && !filter && (\n            <Pagination\n              currentPage={currentPage}\n              postsPerPage={postsPerPage}\n              noOfPosts={posts}\n              onPreviousClick={previousClickHandler}\n              onNextClick={nextClickHandler}\n              onPageChange={pageChangeHandler}\n            />\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default App;
\n

Now, our pagination component functions as expected.

\n

\n \n \n \n \n

\n
Learn to implement server-side pagination in a React + Express application in my blog post here.
\n","frontmatter":{"title":"Implement Pagination, Search & Filter in a React App - Part 3 - Pagination","date":"2021-06-25"}}},"pageContext":{"slug":"/implement-pagination-search-and-filter-in-a-react-app-part-3/","prev":{"fields":{"slug":"/usage-of-the-useref-hook-in-react/"},"frontmatter":{"modules":null}},"next":{"fields":{"slug":"/implement-pagination-search-and-filter-in-a-react-app-part-2/"},"frontmatter":{"modules":null}}}}, "staticQueryHashes": ["3159585216"]}