The search filter is used in various projects which generally returns all the matching products of the name you entered which could be used at many different places and the logic remains the same for it. So if you want to make a search filter in React.js then follow the steps mentioned below.
Creating React Application And Setting Up Project Module: Go inside the folder where you want to initialize your project and then,
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: After this, your project structure will look like this,
Project Structure
Step 4: Open App.js and copy and paste the code written below.
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; |
For Running the Development server, write the command mentioned  below,
npm start
Output:
Products filtered according to pant as an input
From the multiple available products, we write shoes and then click on the search icon and after that the products which match shoes get filtered and displayed on the screen.
