How to Make a Filter Search Bar in ReactJS

Building a filter search bar in ReactJS is one of the most common and useful features in modern web applications. Whether you’re working on a product list, blog, or dashboard, being able to search and filter items dynamically can greatly improve user experience.

In this post, you’ll learn how to create a simple and efficient filter search bar using React — step by step.

What You’ll Learn

How to store and render a list of items in React
How to capture user input with a search bar
How to dynamically filter a list based on user input

Step 1: Set Up a React App

If you haven’t already, create a new React project using Vite or Create React App.

Using Vite (recommended):

npm create vite@latest filter-search -- --template react
cd filter-search
npm install
npm run dev

Or with Create React App:

npx create-react-app filter-search
cd filter-search
npm start

Step 2: Create a List of Items

In your App.jsx (or App.js), start by defining a simple array of items to display.

const items = [
  "Apple",
  "Banana",
  "Cherry",
  "Grape",
  "Mango",
  "Orange",
  "Strawberry",
];

Step 3: Add State for the Search Query

We’ll use React’s useState hook to keep track of the search input.

import { useState } from "react";

function App() {
  const items = [
    "Apple",
    "Banana",
    "Cherry",
    "Grape",
    "Mango",
    "Orange",
    "Strawberry",
  ];

  const [searchTerm, setSearchTerm] = useState("");

  return (
    <div style={{ padding: "20px", fontFamily: "Arial" }}>
      <h1>Fruit Search 🍓</h1>
      <input
        type="text"
        placeholder="Search fruits..."
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        style={{
          padding: "10px",
          width: "250px",
          borderRadius: "8px",
          border: "1px solid #ccc",
        }}
      />
    </div>
  );
}

export default App;

Step 4: Filter the Items Dynamically

Now, we’ll filter the array of items based on the user’s search term. This can be done with the JavaScript filter() and includes() methods.

const filteredItems = items.filter((item) =>
  item.toLowerCase().includes(searchTerm.toLowerCase())
);

Then display them in a list:

<ul>
  {filteredItems.map((item, index) => (
    <li key={index}>{item}</li>
  ))}
</ul>

Full code so far:

import { useState } from "react";

function App() {
  const items = [
    "Apple",
    "Banana",
    "Cherry",
    "Grape",
    "Mango",
    "Orange",
    "Strawberry",
  ];

  const [searchTerm, setSearchTerm] = useState("");

  const filteredItems = items.filter((item) =>
    item.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div style={{ padding: "20px", fontFamily: "Arial" }}>
      <h1>Fruit Search 🍓</h1>
      <input
        type="text"
        placeholder="Search fruits..."
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        style={{
          padding: "10px",
          width: "250px",
          borderRadius: "8px",
          border: "1px solid #ccc",
        }}
      />

      <ul>
        {filteredItems.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Step 5: Add Some Polish (Optional)

You can enhance the user experience by:

Showing a message when no items match the search
Highlighting matched text
Adding animations or debounce for smoother performance

Example:

{filteredItems.length > 0 ? (
  <ul>
    {filteredItems.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
) : (
  <p>No items found 😢</p>
)}

Bonus: Filtering Complex Data (Objects)

If your data is more complex — for example, an array of objects — you can easily adapt this logic:

const products = [
  { id: 1, name: "MacBook Pro", category: "Laptop" },
  { id: 2, name: "iPhone 14", category: "Phone" },
  { id: 3, name: "AirPods Pro", category: "Audio" },
];

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

Then render with:

<ul>
  {filteredProducts.map((p) => (
    <li key={p.id}>
      {p.name} — <em>{p.category}</em>
    </li>
  ))}
</ul>

You’ve just built a simple but powerful filter search bar in ReactJS!

This approach works well for small datasets, but if you’re dealing with large lists or API data, consider:

Using debounce (e.g., lodash.debounce) to reduce re-renders
Implementing server-side filtering for better performance

TL;DR

Store your data in an array
Use useState to track input
Filter with .filter() and .includes()
Render the filtered list dynamically

That’s it! You now have a fully functional, dynamic filter search bar in React.

Share this post:

← What Happened to Rooting or Jailbreaking?

GIT Commands Every Developer Should Know →