React Search Filter

We'll learn how to conduct a search filter in React utilizing React Hooks and axios as our data fetching data source today.

Steps

Create a react app npx create-react-app .
Install axios: npm i axios

Create a component and name it SearchFilter

In your SearchFilter.jsx

import React from "react";
const SearchFilter = () => {
  return (
    <div>
      <h1>Search filter page</h1>
    </div>
  );
};

export default SearchFilter;

In your App.js

import "./App.css";
import SearchFilter from "./SearchFilter";

function App() {

  return (
    <div className="App">
     <SearchFilter />
    </div>
  );
}

export default App;

Run: npm start

---

Let's create an input to handle our search function in the SearchFilter

import React from "react";
const SearchFilter = () => {
  return (
    <div>
      <h1>Search filter page</h1>
      <input type="text" placeholder="enter search term ....." />
    </div>
  );
};

export default SearchFilter;

Result:

---

Now, let's visit [site]https://www.mockaroo.com/) to get our mock data.

Note: Ensure you select the JSON option

Import your mock data into your project.

---

Let's flesh out the function to fire on every onchange.

import JSONDATA from "./MOCK_DATA.json";
import { useState } from "react";

const SearchFilter = () => {
  const [searchTerm, setSearchTerm] = useState("");
  return (
    <div>
      <input
        type="text"
        placeholder="enter search term ....."
        onChange={(event) => {
          setSearchTerm(event.target.value);
        }}
      />
      {JSONDATA.filter((val) => {
        if (searchTerm === "") {
          return val;
        } else if (
          val.first_name
            .toLocaleLowerCase()
            .includes(searchTerm.toLocaleLowerCase())
        ) {
          return val;
        }
      }).map((val, key) => {
        return (
          <div className="user" key={key}>
            <p>{val.first_name}</p>
          </div>
        );
      })}
    </div>
  );
};

export default SearchFilter;

Explanation:

• We import the mock data gotten.
• Then imported our useState Hook.
• initiated the state to an empty string.
• Created an onchange function

onChange={(event) => {
          setSearchTerm(event.target.value);
        }}

• To acquire our value, we used the filter and map functions, and we converted the filtered value to lowercase to avoid case sensitive errors.

---

Result:

Background Color from coolors.co

Source Code Link: Click

Conclusion

Thanks for reading, and be sure to check out my post on React Conditional Rendering here.

Resource

React filter by Pedro Tech