How to Build a Search Bar to Filter Data in React

In most modern web applications, a search bar is essential. Whether you're building an e-commerce site, a customer database, or a task manager, users often need to filter through long lists of information.

React makes it easy to build such functionality using just a few simple tools: state, event handling, and array filtering.

In this blog, we’ll walk you through how to build a search bar in React to filter a list of data in real time. By the end of this guide, you'll be able to implement a clean, efficient search experience in any React project, even as a beginner.

What You’ll Learn

* How to store and update user input with useState

* How to filter a list of data based on the search query

* How to create a responsive, user-friendly UI

Setting Up a React App

If you already have a React app running, feel free to skip this step. Otherwise, create one using Create React App:

npx create-react-app search-bar-demo
cd search-bar-demo
npm start

Now, open the src/App.js file — that’s where we’ll be working.

Sample Data

For demonstration, let’s use a simple array of fruit names. You can imagine these as product names or customer names.

const sampleData = [
  "Apple",
  "Banana",
  "Orange",
  "Grapes",
  "Strawberry",
  "Mango",
  "Pineapple",
  "Blueberry"
];

Writing the Search Logic

The core logic of filtering happens in a single line: using JavaScript’s filter() function combined with includes() and toLowerCase() for a case-insensitive search.

But first, we need to create a state to store the search input.

import React, { useState } from 'react';
function App() {
  const [searchTerm, setSearchTerm] = useState("");
  const sampleData = [
    "Apple",
    "Banana",
    "Orange",
    "Grapes",
    "Strawberry",
    "Mango",
    "Pineapple",
    "Blueberry"
  ];
  const filteredData = sampleData.filter(item =>
    item.toLowerCase().includes(searchTerm.toLowerCase())
  );
  return (
    <div style={{ padding: "20px", maxWidth: "400px", margin: "0 auto" }}>
      <h1>Fruit List</h1>
      <input
        type="text"
        placeholder="Search fruits..."
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        style={{
          width: "100%",
          padding: "8px",
          marginBottom: "20px",
          fontSize: "16px"
        }}
      />
      <ul>
        {filteredData.length > 0 ? (
          filteredData.map((item, index) => <li key={index}>{item}</li>)
        ) : (
          <li>No results found.</li>
        )}
      </ul>
    </div>
  );
}
export default App;

Understanding the Code

Let’s break it down:

1. useState

We use the useState hook to store and update the search input. It tracks whatever the user types in the search box.

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

2. filter()

The filter() method creates a new array of items that match the search term. We convert both the item and the search term to lowercase to make the comparison case-insensitive.

sampleData.filter(item =>
  item.toLowerCase().includes(searchTerm.toLowerCase())
);

3. onChange event

Every time the user types something, the onChange event updates the searchTerm.

onChange={(e) => setSearchTerm(e.target.value)}

Building a search bar in React is surprisingly simple and powerful. With just a few lines of code, you can offer a smoother, faster experience for your users.

To read more about How to Implement Google Sign-In in React, refer to our blog How to Implement Google Sign-In in React.