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 ```javascript

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:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ou58jzh56lmmdbyi64ay.PNG)

Background Color from [coolors.co](https://coolors.co/0a090c-f0edee-07393c-2c666e-90ddf0) 

<kbd>Source Code Link</kbd>: [Click](https://github.com/drsimplegraffiti/sandbox/tree/main/searchfilter)

## Conclusion
Thanks for reading, and be sure to check out my post on React Conditional Rendering [here](https://dev.to/drsimplegraffiti/react-conditional-rendering-32b4).

## Resource
[React filter by Pedro Tech](https://www.youtube.com/watch?v=mZvKPtH9Fzo)