React Search Filter
Tags: webdev, programming, tutorial, javascript
Published: 2022-01-24 08:37:56

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: <kbd>npm i axios</kbd>

Create a component and name it <kbd>SearchFilter</kbd>
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m0h8hqo27c8uotvdi39v.PNG)
 
In your SearchFilter.jsx
```javascript
import React from "react";
const SearchFilter = () => {
  return (
    <div>
      <h1>Search filter page</h1>
    </div>
  );
};

export default SearchFilter;
```

In your <kbd>App.js</kbd>
```javascript
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 <kbd>SearchFilter</kbd>
```javascript
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:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uwtqja8kxzornn9duysy.PNG)
 

---

Now, let's visit [site]https://www.mockaroo.com/) to get our mock data.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o3sxa1zb8pkru1dr1j3x.PNG)
Note: Ensure you select the `JSON` option 

Import your mock data into your project.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zct8nqyb4qi2mtdy4sgo.PNG)


---

Let's flesh out the function to fire on every onchange. 
```javascript
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)