Introduction
Search and Filter features are commonly used in React applications to help users find specific data quickly. A search can match text such as product names or user names, while a filter can show items based on categories, prices, or other conditions. In this chapter, we will practice building search and filter features using useState(), filter(), includes(), and conditional rendering. React js Search and Filter practice questions with solutions help to understand the concepts.
1. What is Search and Filter in React?
Search and Filter are features used to display only the data that matches a user’s input or selected condition.
For example, a product list may contain:
Laptop
Mobile
Headphones
Keyboard
If the user searches for:
lap
the application can display:
Laptop
Filtering works similarly by applying a condition to the data.
2. How do you Create a Basic Search in React?
You can store the search text in state and use filter() to find matching items.
Solution:
import { useState } from "react";
function App() {
const [search, setSearch] = useState("");
const products = [
"Laptop",
"Mobile",
"Headphones",
"Keyboard"
];
const filteredProducts = products.filter((product) =>
product.toLowerCase().includes(search.toLowerCase())
);
return (
<div>
<input
type="text"
value={search}
onChange={(event) => setSearch(event.target.value)}
placeholder="Search products"
/>
{filteredProducts.map((product) => (
<p key={product}>{product}</p>
))}
</div>
);
}
export default App;
Here:
includes()
checks whether the product contains the entered search text.
toLowerCase() makes the search case-insensitive.
3. How do you Search an Array of Objects in React?
When the data contains objects, you can search a specific property such as name.
Solution:
import { useState } from "react";
function ProductSearch() {
const [search, setSearch] = useState("");
const products = [
{ id: 1, name: "Laptop", price: 60000 },
{ id: 2, name: "Mobile", price: 30000 },
{ id: 3, name: "Headphones", price: 5000 }
];
const filteredProducts = products.filter((product) =>
product.name
.toLowerCase()
.includes(search.toLowerCase())
);
return (
<div>
<input
type="text"
value={search}
onChange={(event) => setSearch(event.target.value)}
placeholder="Search products"
/>
{filteredProducts.map((product) => (
<div key={product.id}>
<h3>{product.name}</h3>
<p>₹{product.price}</p>
</div>
))}
</div>
);
}
export default ProductSearch;
The important part is:
product.name
.toLowerCase()
.includes(search.toLowerCase())
The search is performed on the product’s name property.
4. How do you Create a Category Filter in React?
You can store the selected category in state and use filter() to display matching products.
Solution:
import { useState } from "react";
function ProductFilter() {
const [category, setCategory] = useState("All");
const products = [
{ id: 1, name: "Laptop", category: "Electronics" },
{ id: 2, name: "T-Shirt", category: "Clothing" },
{ id: 3, name: "Mobile", category: "Electronics" },
{ id: 4, name: "Shoes", category: "Clothing" }
];
const filteredProducts =
category === "All"
? products
: products.filter(
(product) => product.category === category
);
return (
<div>
<select
value={category}
onChange={(event) => setCategory(event.target.value)}
>
<option value="All">All</option>
<option value="Electronics">Electronics</option>
<option value="Clothing">Clothing</option>
</select>
{filteredProducts.map((product) => (
<p key={product.id}>
{product.name} - {product.category}
</p>
))}
</div>
);
}
export default ProductFilter;
When All is selected, all products are displayed.
When a specific category is selected, only matching products are displayed.
5. How do you Create a Search and Category Filter Together?
You can apply multiple conditions to the same filter() operation.
Solution:
import { useState } from "react";
function ProductApp() {
const [search, setSearch] = useState("");
const [category, setCategory] = useState("All");
const products = [
{ id: 1, name: "Laptop", category: "Electronics" },
{ id: 2, name: "Mobile", category: "Electronics" },
{ id: 3, name: "T-Shirt", category: "Clothing" },
{ id: 4, name: "Shoes", category: "Clothing" }
];
const filteredProducts = products.filter((product) => {
const matchesSearch = product.name
.toLowerCase()
.includes(search.toLowerCase());
const matchesCategory =
category === "All" ||
product.category === category;
return matchesSearch && matchesCategory;
});
return (
<div>
<input
type="text"
value={search}
onChange={(event) => setSearch(event.target.value)}
placeholder="Search products"
/>
<select
value={category}
onChange={(event) => setCategory(event.target.value)}
>
<option value="All">All</option>
<option value="Electronics">Electronics</option>
<option value="Clothing">Clothing</option>
</select>
{filteredProducts.map((product) => (
<p key={product.id}>
{product.name} - {product.category}
</p>
))}
</div>
);
}
export default ProductApp;
The two conditions are combined using:
matchesSearch && matchesCategory
Therefore, a product must satisfy both conditions.
6. How do you Filter Products by Price in React?
You can use a numeric condition with filter().
Solution:
import { useState } from "react";
function ProductFilter() {
const [maxPrice, setMaxPrice] = useState(50000);
const products = [
{ id: 1, name: "Laptop", price: 60000 },
{ id: 2, name: "Mobile", price: 30000 },
{ id: 3, name: "Headphones", price: 5000 },
{ id: 4, name: "Keyboard", price: 2000 }
];
const filteredProducts = products.filter(
(product) => product.price <= maxPrice
);
return (
<div>
<input
type="number"
value={maxPrice}
onChange={(event) =>
setMaxPrice(Number(event.target.value))
}
/>
{filteredProducts.map((product) => (
<p key={product.id}>
{product.name} - ₹{product.price}
</p>
))}
</div>
);
}
export default ProductFilter;
If the maximum price is 50000, products costing more than ₹50,000 are excluded.
Number() is used because input values are received as strings.
7. How do you Display a “No Results Found” Message?
After filtering the data, check whether the resulting array is empty.
Solution:
import { useState } from "react";
function SearchApp() {
const [search, setSearch] = useState("");
const products = [
"Laptop",
"Mobile",
"Headphones",
"Keyboard"
];
const filteredProducts = products.filter((product) =>
product.toLowerCase().includes(search.toLowerCase())
);
return (
<div>
<input
value={search}
onChange={(event) => setSearch(event.target.value)}
placeholder="Search"
/>
{filteredProducts.length === 0 ? (
<p>No results found.</p>
) : (
filteredProducts.map((product) => (
<p key={product}>{product}</p>
))
)}
</div>
);
}
export default SearchApp;
This gives the user useful feedback when their search does not match any item.
8. How do you Filter a List using Multiple Conditions?
You can combine multiple conditions with logical operators such as && and ||.
Solution:
import { useState } from "react";
function ProductFilter() {
const [search, setSearch] = useState("");
const [maxPrice, setMaxPrice] = useState(50000);
const products = [
{
id: 1,
name: "Laptop",
category: "Electronics",
price: 60000
},
{
id: 2,
name: "Mobile",
category: "Electronics",
price: 30000
},
{
id: 3,
name: "Headphones",
category: "Electronics",
price: 5000
}
];
const filteredProducts = products.filter((product) => {
const matchesSearch = product.name
.toLowerCase()
.includes(search.toLowerCase());
const matchesPrice = product.price <= maxPrice;
return matchesSearch && matchesPrice;
});
return (
<div>
<input
value={search}
onChange={(event) => setSearch(event.target.value)}
placeholder="Search product"
/>
<input
type="number"
value={maxPrice}
onChange={(event) =>
setMaxPrice(Number(event.target.value))
}
/>
{filteredProducts.map((product) => (
<p key={product.id}>
{product.name} - ₹{product.price}
</p>
))}
</div>
);
}
export default ProductFilter;
This example filters products based on both:
- Search text
- Maximum price
9. How do you Create a Search Filter for Users?
The same technique can be used for users, students, employees, or other types of data.
Solution:
import { useState } from "react";
function UserSearch() {
const [search, setSearch] = useState("");
const users = [
{
id: 1,
name: "Rahul",
email: "rahul@example.com"
},
{
id: 2,
name: "Priya",
email: "priya@example.com"
},
{
id: 3,
name: "Amit",
email: "amit@example.com"
}
];
const filteredUsers = users.filter((user) =>
user.name
.toLowerCase()
.includes(search.toLowerCase())
);
return (
<div>
<input
value={search}
onChange={(event) => setSearch(event.target.value)}
placeholder="Search users"
/>
{filteredUsers.length === 0 ? (
<p>No users found.</p>
) : (
filteredUsers.map((user) => (
<div key={user.id}>
<h3>{user.name}</h3>
<p>{user.email}</p>
</div>
))
)}
</div>
);
}
export default UserSearch;
This approach can easily be adapted for:
- Student lists
- Employee lists
- Customer lists
- Product lists
- Blog posts
10. How do you Build a Practical Product Search and Filter Application?
You can combine search, category filtering, price filtering, and empty-state handling in one React component.
Solution:
import { useState } from "react";
function ProductApp() {
const [search, setSearch] = useState("");
const [category, setCategory] = useState("All");
const [maxPrice, setMaxPrice] = useState(100000);
const products = [
{
id: 1,
name: "Laptop",
category: "Electronics",
price: 60000
},
{
id: 2,
name: "Mobile",
category: "Electronics",
price: 30000
},
{
id: 3,
name: "Headphones",
category: "Electronics",
price: 5000
},
{
id: 4,
name: "T-Shirt",
category: "Clothing",
price: 1200
},
{
id: 5,
name: "Shoes",
category: "Clothing",
price: 2500
}
];
const filteredProducts = products.filter((product) => {
const matchesSearch = product.name
.toLowerCase()
.includes(search.toLowerCase());
const matchesCategory =
category === "All" ||
product.category === category;
const matchesPrice =
product.price <= maxPrice;
return (
matchesSearch &&
matchesCategory &&
matchesPrice
);
});
return (
<div>
<h2>Product Search</h2>
<input
type="text"
value={search}
onChange={(event) => setSearch(event.target.value)}
placeholder="Search products"
/>
<select
value={category}
onChange={(event) => setCategory(event.target.value)}
>
<option value="All">All Categories</option>
<option value="Electronics">Electronics</option>
<option value="Clothing">Clothing</option>
</select>
<input
type="number"
value={maxPrice}
onChange={(event) =>
setMaxPrice(Number(event.target.value))
}
/>
<h3>
Products Found: {filteredProducts.length}
</h3>
{filteredProducts.length === 0 ? (
<p>No products found.</p>
) : (
filteredProducts.map((product) => (
<div key={product.id}>
<h3>{product.name}</h3>
<p>Category: {product.category}</p>
<p>Price: ₹{product.price}</p>
</div>
))
)}
</div>
);
}
export default ProductApp;
What this example demonstrates:
Search:
product.name
.toLowerCase()
.includes(search.toLowerCase())
Category filter:
category === "All" ||
product.category === category
Price filter:
product.price <= maxPrice
Combining filters:
return (
matchesSearch &&
matchesCategory &&
matchesPrice
);
Empty result handling:
filteredProducts.length === 0
This pattern can be used as the foundation for product catalogs, e-commerce pages, student directories, employee dashboards, and search-based React applications.
Key Takeaways
- Search and Filter help users find relevant data quickly.
useState()can store search text and selected filter values.filter()creates a new array containing matching items.includes()is useful for text-based searching.toLowerCase()can make text searches case-insensitive.- Multiple filter conditions can be combined using
&&and||. - Numeric filters can compare values such as price or marks.
- Always handle the case when no items match the filters.
- Search and filter logic can work with arrays of strings or objects.
- For larger applications or very large datasets, filtering strategy and performance may need additional consideration.
FAQs
1. How do you create a search feature in React?
Store the search text in state and use filter() with includes() to find matching items.
2. Which JavaScript method is commonly used for filtering data in React?
The filter() method is commonly used because it returns a new array containing items that satisfy a condition.
3. How do you make a React search case-insensitive?
Convert both the data and search text to lowercase:
product.name
.toLowerCase()
.includes(search.toLowerCase())
4. Can React have multiple filters at the same time?
Yes. You can combine conditions for search, category, price, status, or other fields using logical operators.
5. How do you display a message when no search results are found?
Check the length of the filtered array:
filteredProducts.length === 0
Then display a message such as No products found.
6. Should filtered data be stored separately in React state?
Usually, no. If filtered data can be calculated from existing state and props, it is often better to calculate it during rendering rather than store another synchronized state value.
7. Can search and filter be used with API data?
Yes. You can fetch data from an API and then filter the received data in React. For large datasets, server-side searching or filtering may be more appropriate.
Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.
