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

In part-1, we implemented a filter functionality in our application wherein we were able to filter through our list of blog posts and display the filtered posts by clicking on the names of blog post categories.

\n

In this part, we will add search functionality. Before we work on the search logic, let’s first add a search bar.

\n

In the components folder, create a file called SearchBar.js and add the following code snippets.

\n
src/components/SearchBar.js
\n
import React from "react"\n\nconst SearchBar = () => {\n  return (\n    <div className="col-md-4">\n      <input\n        type="search"\n        className="form-control form-control-lg"\n        placeholder="Search..."\n      />\n    </div>\n  )\n}\n\nexport default SearchBar
\n

Now render the SearchBar component inside the App component.

\n
src/App.js
\n
import React, { useState } from "react";\nimport Posts from "./components/Posts";\nimport Categories from "./components/Categories";\nimport { useDispatch } from "react-redux";\nimport { filterPosts } from "./components/blog-state";\nimport SearchBar from "./components/SearchBar";\n\nconst App = () => {\n  const [filter, setFilter] = useState(false);\n  const [currentCategory, setCurrentCategory] = useState("");\n\n  const dispatch = useDispatch();\n\n  const categoryChangeHandler = (category) => {\n    setCurrentCategory(category);\n    if (category === "All Categories") {\n      setFilter(false);\n    } else {\n      dispatch(filterPosts(category));\n      setFilter(true);\n    }\n  };\n\n  return (\n    <div className="container">\n      <div className="row row-one justify-content-center">\n        <SearchBar />\n      </div>\n      <div className="row justify-content-center">\n        <div className="title col-md-6">\n          <Posts filter={filter} />\n        </div>\n        <div className="category col-md-2">\n          <Categories\n            currentCategory={currentCategory}\n            categoryChangeHandler={categoryChangeHandler}\n          />\n        </div>\n      </div>\n    </div>\n  );\n};\nexport default App;
\n

Add the following code snippets in index.css.

\n
src/index.css
\n
\n/* rest of the code */\n\n.row-one {\nmargin-bottom: 3rem;\n}\n\n/* rest of the code */\n
\n

And we have the following result:

\n

\n \n \n \n \n

\n

The search functionality is working. However, there is one minor issue we must fix.

\n

Let's understand the issue that I am talking about.

\n

Make sure that you have typed red in the search bar. Our search query returns one blog post, as shown above. Then click on the category named Redux Toolkit. We now have two blog posts - one from our search query and the other from the category filter.

\n

\n \n .grvsc-code > .grvsc-line::before {\n content: ' ';\n position: absolute;\n width: 100%;\n }\n \n .grvsc-line-diff-add::before {\n background-color: var(--grvsc-line-diff-add-background-color, rgba(0, 255, 60, 0.2));\n }\n \n .grvsc-line-diff-del::before {\n background-color: var(--grvsc-line-diff-del-background-color, rgba(255, 0, 20, 0.2));\n }\n \n .grvsc-line-number {\n padding: 0 2px;\n text-align: right;\n opacity: 0.7;\n }\n \n .synthwave-84 { background-color: #262335; }\n .synthwave-84 .mtki { font-style: italic; }\n .synthwave-84 .mtk8 { color: #72F1B8; }\n .synthwave-84 .mtk1 { color: #FFFFFF; }\n .synthwave-84 .mtk3 { color: #FF7EDB; }\n .synthwave-84 .mtk10 { color: #FEDE5D; }\n .synthwave-84 .mtk16 { color: #FF8B39; }\n .synthwave-84 .mtk6 { color: #36F9F6; }\n .synthwave-84 .mtk12 { color: #FFFFFFEE; }\n .synthwave-84 .mtk5 { color: #F97E72; }\n .synthwave-84 .mtk9 { color: #FE4450; }\n .synthwave-84 .mtk4 { color: #848BBD; }\n .synthwave-84 .mtk14 { color: #B6B1B1; }\n .synthwave-84 .mtk7 { color: #2EE2FA; }\n .synthwave-84 .grvsc-line-highlighted::before {\n background-color: var(--grvsc-line-highlighted-background-color, rgba(255, 255, 255, 0.1));\n box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, rgba(255, 255, 255, 0.5));\n }\n","frontmatter":{"title":"Implement Pagination, Search & Filter in a React App - Part 2 - Search","date":"2021-06-24"}}},"pageContext":{"slug":"/implement-pagination-search-and-filter-in-a-react-app-part-2/","prev":{"fields":{"slug":"/implement-pagination-search-and-filter-in-a-react-app-part-3/"},"frontmatter":{"modules":null}},"next":{"fields":{"slug":"/implement-pagination-search-and-filter-in-a-react-app-part-1/"},"frontmatter":{"modules":null}}}}, "staticQueryHashes": ["3159585216"]}