{ "componentChunkName": "component---src-templates-blog-post-js", "path": "/implement-pagination-search-and-filter-in-a-react-app-part-1/", "result": {"data":{"markdownRemark":{"html":"

We will learn how to implement pagination, search and filter in a React application by building an app from scratch.

\n

First, let’s take a tour of the application that we are going to build.

\n

On the home page, we display a list of blog posts.

\n

\n \n \n \n \n

\n

We can click on the Previous or Next links to go the previous or next page. We can also click on a page number to go to that specific page.

\n

\n \n \n \n \n

\n

When we click on a category, blog posts that belong only to that category are displayed.

\n

\n \n \n \n \n

\n

Prerequisite

\n

In order to follow this tutorial, you must understand the fundamentals of Redux Toolkit - a library we will use to manage the global state of our application.

\n
Learn the essential concepts of Redux Toolkit in my blog post here.
\n

Techstack

\n

For styling, we will primarily use Bootstrap classes and components. We will also use a few utility functions from a JavaScript library called Lodash.

\n

Ok, let’s get started.

\n

Create a folder called blog, open the folder in VS Code and create a React project inside the folder using the following command:

\n
PS D:\\blog> npx create-react-app .
\n

We will install all the packages we need. Run the following command:

\n
PS D:\\blog> npm i @reduxjs/toolkit react-redux bootstrap lodash
\n

Before we can use Bootstrap classes in our React components, we must import the Bootstrap minified CSS in our application’s entry point (index.js) above our index.css import.

\n
src/index.js
\n
import React from 'react';\nimport ReactDOM from 'react-dom';\nimport "bootstrap/dist/css/bootstrap.min.css";\nimport './index.css';\nimport App from './App';\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById('root')\n);
\n

Next, we will set up our Redux store.

\n

Inside the src folder, create a folder called components, and inside the components folder, create a file called blog-state.js and add the following code snippet.

\n
src/components/blog-state.js
\n
import { createSlice } from "@reduxjs/toolkit";\n\nconst initialState = {\n  posts: [\n    { id: 1, title: "An Introduction to React", category: "React" },\n    {\n      id: 2,\n      title: "State Management With Redux Toolkit",\n      category: "Redux Toolkit",\n    },\n    {\n      id: 3,\n      title: "The Complete Guide to React Hooks",\n      category: "React",\n    },\n    {\n      id: 4,\n      title: "GraphQL Query With Apollo Client",\n      category: "GraphQL",\n    },\n    {\n      id: 5,\n      title: "GraphQL Server Using Apollo Server",\n      category: "GraphQL",\n    },\n    {\n      id: 6,\n      title: "Build a Coding Blog Using Gatsby",\n      category: "Gatsby",\n    },\n    {\n      id: 7,\n      title: "Implement Algolia Search in a Gatsby Site",\n      category: "Gatsby",\n    },\n    {\n      id: 8,\n      title: "An Introduction to Firestore Cloud Functions",\n      category: "Firebase",\n    },\n    {\n      id: 9,\n      title: "Authentication in GraphQL",\n      category: "GraphQL",\n    },\n    {\n      id: 10,\n      title: "A Complete Guide to Layout Using CSS Grid",\n      category: "CSS",\n    },\n  ]\n};\n\nexport const blogSlice = createSlice({\n  name: "blog",\n  initialState,\n  reducers: {},\n});\n\nexport default blogSlice.reducer;
\n
\n

Above, we have hard-coded a list of blog posts. In the real world however, we would most likely fetch our blog posts by making HTTP requests to an API endpoint.

\n
\n

We will map through the list of blog posts and display them in our Posts.js component (which we have not created yet).

\n

Next, we will import the blogSlice reducer in the store.js file.

\n

In the src folder, create a file called store.js with the following code snippets.

\n
src/store.js
\n
import { configureStore } from "@reduxjs/toolkit";\nimport blogSliceReducer from "../src/components/blog-state";\n\nexport const store = configureStore({\n  reducer: {\n    blog: blogSliceReducer,\n  },\n});
\n

Here, we are essentially saying that blogSliceReducer will be responsible for managing the blog slice of our global state.

\n

Next, we will make the Redux store available to all our React components by wrapping the root component (App.js) with the Provider component from react-redux.

\n
src/index.js
\n
import React from 'react';\nimport ReactDOM from 'react-dom';\nimport "bootstrap/dist/css/bootstrap.min.css";\nimport './index.css';\nimport App from './App';\nimport { Provider } from "react-redux";\nimport { store } from "./store";\n\nReactDOM.render(\n  <Provider store={store}>\n    <App />\n  </Provider>,\n  document.getElementById('root')\n);
\n

Redux store set up is complete.

\n

Now, we will create a Posts.js component, from where we will access the posts array in the Redux store by using the useSelector hook from react-redux. Then, we will map through the posts array and display a list of blog post titles.

\n

In the components folder, create a file called Posts.js.

\n
src/components/Posts.js
\n
import React from "react";\nimport { useSelector } from "react-redux";\n\nconst Posts = () => {\n\nconst { posts } = useSelector((state) => state.blog);\n\nreturn (\n    <>\n        <p>\n            showing {posts.length} posts of total {posts.length} posts\n        </p>\n        <div>\n          {posts.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

Next, we will render the Posts component inside the App component.

\n

Update the App.js file as follows:

\n
src/App.js
\n
import React from 'react'\nimport Posts from './components/Posts'\n\n\nconst App = () => {\n  return (\n    <div className="container">\n      <div className="row justify-content-center">\n        <div className="title col-md-6">\n          <Posts />\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default App
\n

Before we start our application, we will add the following rules in our index.css file.

\n
src/index.css
\n
* {\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n}\n\nhtml {\n  font-size: 62.5%;\n  font-family: sans-serif;\n}\n\n.container {\n  margin-top: 3rem;\n}\n\n.title {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  align-items: flex-start;\n}\n\np {\n  color: #0d6efd;\n  font-size: 1.2rem;\n}
\n

Start the application using the command npm start. We have the following result:

\n

\n \n \n \n \n

\n

But we have a problem: because multiple blog posts can belong to a single category, we have duplicates in the category list. We can remove the duplicates by using the Set object in JavaScript.

\n
Learn how to remove duplicate values in an array using Set in JavaScript in my blog post here.
\n

Update the Categories.js file as follows:

\n
src/components/Categories.js
\n
import React from "react";\nimport { useSelector } from "react-redux";\n\nconst Categories = () => {\n\nconst { posts } = useSelector((state) => state.blog);\n\nconst categories = [];\nposts.map(post => categories.push(post.category))\nconst categoriesFinal = ["All Categories", ...new Set(categories)];\n\n  return (\n    <ul className="list-group">\n      {categoriesFinal.map((category) => (\n        <li\n          key={category}\n          className="list-group-item"\n        >\n          {category}\n        </li>\n      ))}\n    </ul>\n  );\n};\n\nexport default Categories;
\n

On line 10, I have manually added a category called All Categories in the categoriesFinal array. We have added this category so that when we click on it, we display our complete blog post list.

\n

Now our category list only contains unique values.

\n

\n \n \n \n \n

\n

\n \n \n \n \n

\n

Our implementation of the filter feature is complete.

\n

In part-2, we will implement the search functionality.

\n","frontmatter":{"title":"Implement Pagination, Search & Filter in a React App - Part 1 - Filter","date":"2021-06-23"}}},"pageContext":{"slug":"/implement-pagination-search-and-filter-in-a-react-app-part-1/","prev":{"fields":{"slug":"/implement-pagination-search-and-filter-in-a-react-app-part-2/"},"frontmatter":{"modules":null}},"next":{"fields":{"slug":"/how-to-style-links-in-css/"},"frontmatter":{"modules":null}}}}, "staticQueryHashes": ["3159585216"]}