How to implement search filter functionality in React JS ?
Last Updated :
28 May, 2024
In React JS, search filter functionality involves dynamically filtering data displayed in components based on user input. It typically utilizes state management to track search query changes, updating the component's rendering to display only matching items in real time.
Prerequisites:
Approach to implement search filter functionality:
- State Initialization: Initialize the state variables
productList
and searchVal
using the useState
hook, with productList
containing an array of product names. - Search Functionality: Implement the
handleSearchClick
function to filter products based on the search input. If the search input is empty, reset the products to the original list. - User Interface: Create a simple UI using an input field for search and the BsSearch icon from
react-icons/bs
. Display the filtered or original product list based on the search term.
Steps to Create React Application And Setting Up Project Module:
Step 1: Create a React application using the following command:
npx create-react-app project_name
Step 2: After creating your project folder i.e. project_name, jump into it by writing this command:
cd project_name
Step 3: After this, add react icons to the project by writing this command:
npm install react-icons --save
Project Structure:
Project StructureThe updated dependencies in package.json file will look like:
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.12.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4",
}
Example: Below is the code example of search filter functionality.
JavaScript
import React, { useState } from 'react'
import './App.css';
import { BsSearch } from 'react-icons/bs';
function App() {
const productList = ["blue pant"
, "black pant"
, "blue shirt"
, "black shoes"
, "brown shoes"
, "white pant"
, "white shoes"
, "red shirt"
, "gray pant"
, "white shirt"
, "golden shoes"
, "dark pant"
, "pink shirt"
, "yellow pant"];
const [products, setProducts] = useState(productList);
const [searchVal, setSearchVal] = useState("");
function handleSearchClick() {
if (searchVal === "") { setProducts(productList); return; }
const filterBySearch = productList.filter((item) => {
if (item.toLowerCase()
.includes(searchVal.toLowerCase())) { return item; }
})
setProducts(filterBySearch);
}
const mystyle = {
marginLeft: "600px",
marginTop: "20px",
fontWeight: "700"
};
return (
<div>
<div style={mystyle}>
<input onChange={e => setSearchVal(e.target.value)}>
</input>
<BsSearch onClick={handleSearchClick} />
</div>
<div>
{products.map((product) => {
return (
<div style={mystyle}>{product}</div>
)
})
}
</div>
</div>
);
}
export default App;
Steps to run the application: Type the following command in the terminal
npm start
Output:
Output
Similar Reads
How To Implement Multiple Filters In React ? Applying Filters in React applications is important for enhancing user experience by allowing users to customize the displayed content based on their preferences. In this article, we will explore two approaches to implementing Multiple Filters in React. Table of Content Using State HooksUsing Contex
6 min read
Implement Search Functionality for Blogs And News Website In blogs and news website, having an efficient search functionality is important for providing a good user experience. Two common approaches to improve search functionality in React applications are filtering and debouncing. Table of ContentFilteringDebouncingIn this article, you will learn about th
7 min read
How to customize search bar in Next.js Customizing a search bar in Next.js enhances user experience by providing fast, efficient content search. This guide covers setting up Algolia, fetching data, and integrating a custom search bar.In this article, we will learn How we can add a customized search bar in the NextJS project using Algolia
3 min read
How to Implement Search and Filtering in a REST API with Node.js and Express.js ? Search and filtering are very basic features that an API must possess to serve data to the client application efficiently. By handling these operations on the server-side, we can reduce the amount of processing that has to be done on the client application, thereby increasing its performance.In this
5 min read
How to add custom filter in search Box in ReactJS? The custom filter means adding our own business login to filter the options shown in searchbox or any dropdown menu. Material UI for React has this component available for us and it is very easy to integrate. We can create our own custom filter for options in ReactJS using the following approach. Cr
2 min read
How to Add Auto-Complete Search Box in ReactJS? An autocomplete search box is a user interface feature that offers suggestions as users type their queries. It enhances the user experience by providing real-time suggestions and help users find what they're looking for more quickly. In this article, we will explore how to implement an autocomplete
5 min read