How to Make a Search Filter using React ?

This is how our Search Filter is going to appear👇

The first step would be setting up our React application and for that, you need to choose a development environment. For this project, we’ll use create-react-app, but feel free to choose another environment that suits your preferences.

To setup your react application follow these steps :

1. Run the following command in your terminal:

npx create-react-app my-app

if the above command doesn’t work, run this command:

npm init react-app my-app

2. Navigate to the root directory of your new React app:

cd my-app

3. Run your build process with `npm start`:

npm start

We have setup our react application, Now we will create the UI of our Temperature controller.

Creating UI :-

Note: If you would like to save time and avoid the task of creating a user interface, you can easily access the UI code from my GitHub repository. Simply
Click here. The main code for the app can be found in the App.js file, the styling code is in index.css, and the data is stored in MOCK_DATA.json.

To create the user interface (UI), we will start by generating dummy data using the website mockaroo.com. Mockaroo allows us to customize and generate mock data based on our preferences. We will download the generated data in JSON format and save the JSON file in our src folder.

MOCK_DATA.json :

[{"first_name":"Riley","last_name":"Labbett","email":"rlabbett0@yellowpages.com"},
{"first_name":"Roslyn","last_name":"Bleackly","email":"rbleackly1@addtoany.com"},
{"first_name":"Thurston","last_name":"Sharram","email":"tsharram2@baidu.com"},
{"first_name":"Isac","last_name":"Berrill","email":"iberrill3@ustream.tv"},
{"first_name":"Cindy","last_name":"Maccrie","email":"cmaccrie4@sun.com"},
{"first_name":"Averil","last_name":"Frangleton","email":"afrangleton5@ted.com"},
{"first_name":"Alverta","last_name":"Minico","email":"aminico6@mediafire.com"},
{"first_name":"Chickie","last_name":"Danilin","email":"cdanilin7@blogger.com"},
{"first_name":"Hasty","last_name":"McCrostie","email":"hmccrostie8@pagesperso-orange.fr"},
{"first_name":"Ned","last_name":"Etoile","email":"netoile9@constantcontact.com"},
{"first_name":"Silvano","last_name":"Roseaman","email":"sroseamana@elpais.com"},
{"first_name":"Hetty","last_name":"Pettisall","email":"hpettisallb@tinypic.com"},
{"first_name":"Cyndia","last_name":"Faldo","email":"cfaldoc@angelfire.com"},
{"first_name":"Devy","last_name":"Britten","email":"dbrittend@jigsy.com"},
{"first_name":"Jedidiah","last_name":"Dachey","email":"jdacheye@ucsd.edu"},
{"first_name":"Shandee","last_name":"Boles","email":"sbolesf@businessinsider.com"},
{"first_name":"Colette","last_name":"Smallsman","email":"csmallsmang@flavors.me"},
{"first_name":"Timmi","last_name":"Timby","email":"ttimbyh@hatena.ne.jp"},
{"first_name":"Ludvig","last_name":"Swafield","email":"lswafieldi@t.co"},
{"first_name":"Juieta","last_name":"Januszewicz","email":"jjanuszewiczj@google.co.uk"},
{"first_name":"Irwin","last_name":"Congreve","email":"icongrevek@businesswire.com"}]

Then we will create a parent div element named “container.” Inside this div, we will include an input component where the user can enter text. Additionally, we will create another div called “child-container” within the parent div, where we will display the entire MockData using JavaScript’s map method.

import Mockdata from "./MOCK_DATA.json";

function App() {
  return (
    <div className="App">
      <input type="text" placeholder="search" />

      <div className="child-container">
        {Mockdata.map((ob) => (
          <div>{ob.first_name}</div>
        ))}
      </div>
    </div>
  );
}

export default App;

Now your search-filter should look like this :

Here our UI part has completed.

Filtering the data :

To filter the MockData, we will create a variable called “text” with initial value of empty string (“”) to store the value entered by the user. Whenever the user makes a change in the input component, we will update the value of “text” using the setText function.

import { useState } from "react";

// function App() {
  const [text, settext] = useState("");

//  return (
//    <div className="App">
//      <input
//        type="text"
//        placeholder="search"
        onChange={(event) => settext(event.target.value)}
//      />

//      <div className="child-container">
//        {Mockdata.map((ob) => (
//          <div key={ob.email}>{ob.first_name}</div>
//        ))}
//      </div>
//    </div>
//  );
// }

// export default App;

Now that we have stored the string entered by the user in the input, our next step is to filter the data based on the user’s input.

To filter the data, we will use the filter() and includes() methods. We will create a new variable called “filteredData” to hold the filtered results. The filter() function will iterate through each element in the “Mockdata” array. For every element, it will check if the value of the first_name property (converted to lowercase) includes the provided text (also converted to lowercase).

If the condition is true, the element will be included in the “filteredData” array. Finally, we will use the “filteredData” array instead of the “Mockdata” array and display the filtered data by mapping through it.

App.jsx :

// function App() {
//  const [text, settext] = useState("");

  let filteredData = Mockdata.filter((ele) =>
    ele.first_name.toLowerCase().includes(text.toLowerCase())
  );

//  return (
//    <div className="App">
//      <input
//        type="text"
//        placeholder="search"
//        onChange={(event) => settext(event.target.value)}
//      />

//      <div className="child-container">
        {filteredData.map((ob) => (
//          <div key={ob.email}>{ob.first_name}</div>
//        ))}
//      </div>
//    </div>
//  );
// }

// export default App;

Complete Code : App.jsx

import { useState } from "react";
import "./App.css";
import Mockdata from "./MOCK_DATA.json";

function App() {
  const [text, settext] = useState("");

  let filteredData = Mockdata.filter((ele) =>
    ele.first_name.toLowerCase().includes(text.toLowerCase())
  );

  return (
    <div className="App">
      <input
        type="text"
        placeholder="search"
        onChange={(event) => settext(event.target.value)}
      />

      <div className="child-container">
        {filteredData.map((ob) => (
          <div key={ob.email}>{ob.first_name}</div>
        ))}
      </div>
    </div>
  );
}

export default App;

Now that we have implemented the search filter functionality, our app is ready to be used for searching and filtering data based on user input.

ALSO_SEE – HOW TO MAKE A TEMPERATURE CONTROLLER USING REACT

Creating UI :-

Filtering the data :

Leave a Comment Cancel reply