React: how to create a search filter

  • React
  • Gabriele Romanato

React is one of the most popular JavaScript libraries for creating dynamic and responsive user interfaces. When working with large data sets, it can be extremely useful to implement a search filter to allow users to quickly find the information they are interested in. In this article, we will explore how to create a search filter for data in a React application.

Create the data component

For example purposes, we will create an array of JSON objects that will represent the data to be filtered. This data can be replaced with an external API or database, depending on the needs of your project.


// src/data.js

const data = [
   { id: 1, name: "Product A", category: "Electronics" },
   { id: 2, name: "Product B", category: "Clothing" },
   { id: 3, name: "Product C", category: "Electronics" },
   { id: 4, name: "Product D", category: "Home" },
   // Add more data here
];

export default data;

Create the filter component

We will create a React component called Filter that will allow users to enter a search query and will only display data that matches the query. Here's how you can do it:


// src/Filter.js

import React, { useState } from "react";

const Filter = ({ data, onDataFiltered }) => {
   const [query, setQuery] = useState("");

   const handleInputChange = (e) => {
     const newQuery = e.target.value;
     setQuery(newQuery);

     const filteredData = data.filter((item) =>
       item.name.toLowerCase().includes(newQuery.toLowerCase())
     );

     onDataFiltered(filteredData);
   };

   return (
     <div>
       <input
         type="text"
         placeholder="Search..."
         value={query}
         onChange={handleInputChange}
       />
     </div>
   );
};

export default Filter;

In the Filter component, we use the local state to handle the search query. Whenever the user changes the search input, we filter the data based on the query and use the onDataFiltered function to send the filtered data to the main component.

Create the main component

Now we will create the main component where the filtered data will be displayed. The main component will import both the data and the filter component and pass the filtered data as a prop to the view component.


// src/App.js

import React, { useState } from "react";
import data from "./data";
import Filter from "./Filter";

const App = () => {
   const [filteredData, setFilteredData] = useState(data);

   const handleDataFiltered = (filteredData) => {
     setFilteredData(filteredData);
   };

   return (
     <div>
       <h1>Search Filter</h1>
       <Filter data={data} onDataFiltered={handleDataFiltered} />
       <ul>
         {filteredData.map((item) => (
           <li key={item.id}>
             {item.name} - Category: {item.category}
           </li>
         ))}
       </ul>
     </div>
   );
};

export default App;

In this main component, we import both the data and the Filter component. We use state to handle the filtered data and pass the handleDataFiltered function to the Filter component to receive the filtered data.

Conclusions

Creating a search filter for data in React is an effective way to allow users to quickly find the information they are interested in. With the right implementation, you can improve the usability of your applications and provide a more positive user experience. We hope this article has helped you understand how to create a search filter in a React application.

Back to top