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 Structure
The 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.
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
How to implement search filter functionality in React JS ?
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.