React js Search Application Practice Questions with Solutions

By /

Introduction

A Search Application is a practical React project that helps users quickly find information from a list of data. It is useful for learning controlled inputs, state, array methods, filtering, conditional rendering, and reusable components. In this chapter, we will build a React Search Application step by step, starting with basic text search and progressing to searching objects, multiple fields, no-result handling, and a complete search interface. React js Search Application Practice Questions with Solutions to help you understand the concepts.

1. How to Create a Basic Search Input in React?

Problem Statement:
Create a React component with a search input and display the value entered by the user.

React Solution:

import { useState } from "react";

function SearchApp() {
  const [search, setSearch] = useState("");

  return (
    <div>
      <h1>Search Application</h1>

      <input
        type="text"
        value={search}
        onChange={(event) => setSearch(event.target.value)}
        placeholder="Search here..."
      />

      <p>Search Text: {search}</p>
    </div>
  );
}

export default SearchApp;

Output:

Search Application

[ Search here... ]

Search Text:

If the user types React:

Search Text: React

Explanation:
The search input is a controlled input because its value comes from React state. Every time the user types, setSearch() updates the state.

Concepts Covered:

  • useState
  • Controlled Input
  • onChange
  • State Updates

2. How to Search Items from an Array in React?

Problem Statement:
Create a search box that filters a list of programming languages based on the entered text.

React Solution:

import { useState } from "react";

function SearchApp() {
  const [search, setSearch] = useState("");

  const languages = [
    "JavaScript",
    "Python",
    "Java",
    "C++",
    "React",
    "Node.js"
  ];

  const filteredLanguages = languages.filter((language) =>
    language.toLowerCase().includes(search.toLowerCase())
  );

  return (
    <div>
      <h1>Language Search</h1>

      <input
        value={search}
        onChange={(event) => setSearch(event.target.value)}
        placeholder="Search language..."
      />

      {filteredLanguages.map((language) => (
        <p key={language}>{language}</p>
      ))}
    </div>
  );
}

export default SearchApp;

Output:

Language Search

[ Search language... ]

JavaScript
Python
Java
C++
React
Node.js

If the user searches for py:

Python

Explanation:
filter() creates a new array containing only matching languages. toLowerCase() makes the search case-insensitive, while includes() checks whether the search text exists inside each language name.

Concepts Covered:

  • filter()
  • includes()
  • toLowerCase()
  • map()
  • Controlled Input

3. How to Search an Array of Objects in React?

Problem Statement:
Create a search application that searches products by their names.

React Solution:

import { useState } from "react";

function SearchApp() {
  const [search, setSearch] = useState("");

  const products = [
    { id: 1, name: "Laptop", price: 60000 },
    { id: 2, name: "Keyboard", price: 1500 },
    { id: 3, name: "Mouse", price: 800 },
    { id: 4, name: "Headphones", price: 3000 }
  ];

  const filteredProducts = products.filter((product) =>
    product.name
      .toLowerCase()
      .includes(search.toLowerCase())
  );

  return (
    <div>
      <h1>Product Search</h1>

      <input
        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 SearchApp;

Output:

Product Search

[ Search products... ]

Laptop
₹60000

Keyboard
₹1500

Mouse
₹800

Headphones
₹3000

Searching for lap:

Laptop
₹60000

Explanation:
When working with an array of objects, the search condition is applied to the required property. Here, product.name is converted to lowercase before using includes().

Concepts Covered:

  • Array of Objects
  • filter()
  • map()
  • String Methods
  • Dynamic Rendering

4. How to Make React Search Case-Insensitive?

Problem Statement:
Allow users to find results regardless of whether they type uppercase or lowercase letters.

React Solution:

import { useState } from "react";

function SearchApp() {
  const [search, setSearch] = useState("");

  const students = [
    "Rahul",
    "Priya",
    "Amit",
    "Sneha",
    "Rohan"
  ];

  const filteredStudents = students.filter((student) =>
    student.toLowerCase().includes(search.toLowerCase())
  );

  return (
    <div>
      <h1>Student Search</h1>

      <input
        value={search}
        onChange={(event) => setSearch(event.target.value)}
        placeholder="Search student..."
      />

      {filteredStudents.map((student) => (
        <p key={student}>{student}</p>
      ))}
    </div>
  );
}

export default SearchApp;

Output:

Searching for:

rah

Result:

Rahul

Searching for:

RAH

Result:

Rahul

Explanation:
Both the search value and the student name are converted to lowercase before comparison. Therefore, Rah, rah, and RAH can produce the same result.

Concepts Covered:

  • Case-Insensitive Search
  • toLowerCase()
  • filter()
  • Controlled Input

5. How to Search Products Using Multiple Fields?

Problem Statement:
Search products by either product name or category.

React Solution:

import { useState } from "react";

function SearchApp() {
  const [search, setSearch] = useState("");

  const products = [
    {
      id: 1,
      name: "Laptop",
      category: "Electronics"
    },
    {
      id: 2,
      name: "Office Chair",
      category: "Furniture"
    },
    {
      id: 3,
      name: "Headphones",
      category: "Electronics"
    },
    {
      id: 4,
      name: "Study Table",
      category: "Furniture"
    }
  ];

  const filteredProducts = products.filter((product) => {
    const searchText = search.toLowerCase();

    return (
      product.name.toLowerCase().includes(searchText) ||
      product.category.toLowerCase().includes(searchText)
    );
  });

  return (
    <div>
      <h1>Product Search</h1>

      <input
        value={search}
        onChange={(event) => setSearch(event.target.value)}
        placeholder="Search name or category..."
      />

      {filteredProducts.map((product) => (
        <div key={product.id}>
          <h3>{product.name}</h3>
          <p>{product.category}</p>
        </div>
      ))}
    </div>
  );
}

export default SearchApp;

Output:

Searching for:

Furniture

Result:

Office Chair
Furniture

Study Table
Furniture

Searching for:

Laptop

Result:

Laptop
Electronics

Explanation:
The search checks two properties: name and category. The || operator means that a product is included when either field matches the search text.

Concepts Covered:

  • Multiple Search Fields
  • Logical OR
  • filter()
  • Object Properties

6. How to Show “No Results Found” in a React Search Application?

Problem Statement:
Display a message when the search does not match any item.

React Solution:

import { useState } from "react";

function SearchApp() {
  const [search, setSearch] = useState("");

  const products = [
    { id: 1, name: "Laptop" },
    { id: 2, name: "Keyboard" },
    { id: 3, name: "Mouse" }
  ];

  const filteredProducts = products.filter((product) =>
    product.name
      .toLowerCase()
      .includes(search.toLowerCase())
  );

  return (
    <div>
      <h1>Product Search</h1>

      <input
        value={search}
        onChange={(event) => setSearch(event.target.value)}
        placeholder="Search products..."
      />

      {filteredProducts.length === 0 ? (
        <p>No results found.</p>
      ) : (
        filteredProducts.map((product) => (
          <p key={product.id}>{product.name}</p>
        ))
      )}
    </div>
  );
}

export default SearchApp;

Output:

Searching for:

Tablet

Displays:

No results found.

Explanation:
The filteredProducts.length value is checked before rendering the results. If it is 0, the application displays a helpful message instead of an empty list.

Concepts Covered:

  • Conditional Rendering
  • length
  • filter()
  • Ternary Operator

7. How to Add a Clear Search Button in React?

Problem Statement:
Add a Clear button that removes the current search text and shows the complete list again.

React Solution:

import { useState } from "react";

function SearchApp() {
  const [search, setSearch] = useState("");

  const products = [
    { id: 1, name: "Laptop" },
    { id: 2, name: "Keyboard" },
    { id: 3, name: "Mouse" }
  ];

  const filteredProducts = products.filter((product) =>
    product.name
      .toLowerCase()
      .includes(search.toLowerCase())
  );

  function clearSearch() {
    setSearch("");
  }

  return (
    <div>
      <h1>Product Search</h1>

      <input
        value={search}
        onChange={(event) => setSearch(event.target.value)}
        placeholder="Search products..."
      />

      <button onClick={clearSearch}>
        Clear
      </button>

      {filteredProducts.map((product) => (
        <p key={product.id}>{product.name}</p>
      ))}
    </div>
  );
}

export default SearchApp;

Output:

[ Search products... ] [Clear]

Laptop
Keyboard
Mouse

If the user searches for lap:

[ lap ] [Clear]

Laptop

After clicking Clear:

[ Search products... ] [Clear]

Laptop
Keyboard
Mouse

Explanation:
The Clear button sets the search state back to an empty string. Since the filtering condition uses the search value, all products become visible again.

Concepts Covered:

  • Event Handling
  • useState
  • Controlled Input
  • Conditional Filtering

8. How to Create Search and Category Filter Together?

Problem Statement:
Create a product application where users can search by name and also filter products by category.

React Solution:

import { useState } from "react";

function SearchApp() {
  const [search, setSearch] = useState("");
  const [category, setCategory] = useState("All");

  const products = [
    {
      id: 1,
      name: "Laptop",
      category: "Electronics"
    },
    {
      id: 2,
      name: "Mouse",
      category: "Electronics"
    },
    {
      id: 3,
      name: "Office Chair",
      category: "Furniture"
    },
    {
      id: 4,
      name: "Study Table",
      category: "Furniture"
    }
  ];

  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>
      <h1>Product Search</h1>

      <input
        value={search}
        onChange={(event) => setSearch(event.target.value)}
        placeholder="Search product..."
      />

      <select
        value={category}
        onChange={(event) => setCategory(event.target.value)}
      >
        <option value="All">All</option>
        <option value="Electronics">Electronics</option>
        <option value="Furniture">Furniture</option>
      </select>

      {filteredProducts.length === 0 ? (
        <p>No products found.</p>
      ) : (
        filteredProducts.map((product) => (
          <div key={product.id}>
            <h3>{product.name}</h3>
            <p>{product.category}</p>
          </div>
        ))
      )}
    </div>
  );
}

export default SearchApp;

Output:

[ Search product... ]

[All ▼]

Laptop
Electronics

Mouse
Electronics

Office Chair
Furniture

Study Table
Furniture

If the category is changed to Electronics:

Laptop
Electronics

Mouse
Electronics

If the user also searches for lap:

Laptop
Electronics

Explanation:
Two conditions are applied to the same product list.

  • matchesSearch checks the product name.
  • matchesCategory checks the selected category.

The product is displayed only when both conditions are true.

Concepts Covered:

  • Search
  • Filtering
  • Select Input
  • Multiple Conditions
  • filter()
  • Controlled Components

9. How to Search Users by Name or Email?

Problem Statement:
Create a user search application where users can be searched by either their name or email address.

React Solution:

import { useState } from "react";

function UserSearch() {
  const [search, setSearch] = useState("");

  const users = [
    {
      id: 1,
      name: "Rahul Sharma",
      email: "rahul@example.com"
    },
    {
      id: 2,
      name: "Priya Singh",
      email: "priya@example.com"
    },
    {
      id: 3,
      name: "Amit Kumar",
      email: "amit@example.com"
    }
  ];

  const filteredUsers = users.filter((user) => {
    const searchText = search.toLowerCase();

    return (
      user.name.toLowerCase().includes(searchText) ||
      user.email.toLowerCase().includes(searchText)
    );
  });

  return (
    <div>
      <h1>User Search</h1>

      <input
        value={search}
        onChange={(event) => setSearch(event.target.value)}
        placeholder="Search name or email..."
      />

      {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;

Output:

Searching for:

priya

Result:

Priya Singh
priya@example.com

Searching for:

amit@example.com

Result:

Amit Kumar
amit@example.com

Explanation:
The application searches two fields: name and email. The OR condition allows a match from either field.

This is a common pattern for user directories, contact lists, employee dashboards, and admin panels.

Concepts Covered:

  • Multiple Field Search
  • Objects
  • filter()
  • Conditional Rendering
  • Controlled Input

10. How to Build a Complete React Search Application?

Problem Statement:
Build a practical Search Application with:

  • Search input
  • Case-insensitive search
  • Product name search
  • Category filter
  • No-results messa
  • Clear search button
  • Result count

React Solution:

import { useState } from "react";

function ProductCard({ product }) {
  return (
    <div>
      <h3>{product.name}</h3>
      <p>Category: {product.category}</p>
      <p>Price: ₹{product.price}</p>
    </div>
  );
}

function SearchApp() {
  const products = [
    {
      id: 1,
      name: "Laptop",
      category: "Electronics",
      price: 60000
    },
    {
      id: 2,
      name: "Keyboard",
      category: "Electronics",
      price: 1500
    },
    {
      id: 3,
      name: "Mouse",
      category: "Electronics",
      price: 800
    },
    {
      id: 4,
      name: "Office Chair",
      category: "Furniture",
      price: 7000
    },
    {
      id: 5,
      name: "Study Table",
      category: "Furniture",
      price: 9000
    },
    {
      id: 6,
      name: "Notebook",
      category: "Stationery",
      price: 100
    }
  ];

  const [search, setSearch] = useState("");
  const [category, setCategory] = useState("All");

  const filteredProducts = products.filter((product) => {
    const searchText = search.toLowerCase().trim();

    const matchesSearch = product.name
      .toLowerCase()
      .includes(searchText);

    const matchesCategory =
      category === "All" ||
      product.category === category;

    return matchesSearch && matchesCategory;
  });

  function clearSearch() {
    setSearch("");
    setCategory("All");
  }

  return (
    <div>
      <h1>Product Search Application</h1>

      <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="Furniture">Furniture</option>
        <option value="Stationery">Stationery</option>
      </select>

      <button onClick={clearSearch}>
        Clear
      </button>

      <p>
        Results Found: {filteredProducts.length}
      </p>

      {filteredProducts.length === 0 ? (
        <p>No products found.</p>
      ) : (
        filteredProducts.map((product) => (
          <ProductCard
            key={product.id}
            product={product}
          />
        ))
      )}
    </div>
  );
}

export default SearchApp;

Output:

Initial screen:

Product Search Application

[ Search products... ]

[All Categories ▼] [Clear]

Results Found: 6

Laptop
Category: Electronics
Price: ₹60000

Keyboard
Category: Electronics
Price: ₹1500

Mouse
Category: Electronics
Price: ₹800

Office Chair
Category: Furniture
Price: ₹7000

Study Table
Category: Furniture
Price: ₹9000

Notebook
Category: Stationery
Price: ₹100

Searching for lap:

Results Found: 1

Laptop
Category: Electronics
Price: ₹60000

Selecting Furniture:

Results Found: 2

Office Chair
Category: Furniture
Price: ₹7000

Study Table
Category: Furniture
Price: ₹9000

Searching for phone:

Results Found: 0

No products found.

Explanation:
This complete application combines the main search concepts covered in this chapter.

The search input and category select are controlled by React state. filter() creates the visible product list from the original data. Search is case-insensitive, and trim() prevents unnecessary spaces from affecting the search.

The application also displays the number of matching products and shows a clear message when there are no results. The ProductCard component keeps the product display reusable.

For very large datasets, searching every item in the browser may become inefficient. In such cases, server-side search, pagination, indexing, debouncing, or other data-fetching strategies may be more appropriate.

Concepts Covered:

  • useState
  • Controlled Inputs
  • filter()
  • map()
  • includes()
  • toLowerCase()
  • trim()
  • Conditional Rendering
  • Props
  • Reusable Components
  • Derived Data
  • Multiple Filters

Key Takeaways

  • A React Search Application allows users to find specific information from a larger dataset.
  • useState can store the current search text and filter selections.
  • Controlled inputs keep the search field synchronized with React state.
  • filter() is commonly used to create the matching result list.
  • includes() checks whether search text exists inside a string.
  • toLowerCase() can be used to create case-insensitive searches.
  • Search can be performed across multiple object properties.
  • Search and category filters can be combined using multiple conditions.
  • Filtered results are usually derived from existing data instead of being stored as duplicate state.
  • A good search interface should handle empty searches, no results, result counts, and clear/reset actions.
  • For very large datasets, server-side search may be more suitable than filtering the complete dataset in the browser.

FAQs

1. What is a Search Application in React?

A Search Application in React allows users to enter search text and display only the data that matches their query.

2. Which React Hook is commonly used for search functionality?

useState is commonly used to store the current search text and other filter values.

3. Which JavaScript method is commonly used to filter search results in React?

The filter() method is commonly used to create a new array containing only the matching items.

4. How can I make React search case-insensitive?

Convert both the search text and the value being searched to the same case, commonly using toLowerCase(), before calling includes().

5. Can I search multiple fields in a React application?

Yes. You can check multiple object properties, such as name, email, category, or description, and combine the conditions using logical operators.

6. How do I show “No Results Found” in React Search?

Check whether the filtered array has a length of 0 and conditionally display a message such as No results found.

7. Can I build a complete Search Application using React?

Yes. React can be used to build search applications with search inputs, filters, sorting, result counts, reusable components, API-based search, and pagination.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top