Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
January 24, 2022 08:37 am GMT

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
Image description

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:
Image description

Now, let's visit [site]https://www.mockaroo.com/) to get our mock data.
Image description
Note: Ensure you select the JSON option

Import your mock data into your project.
Image description

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:

Image description

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


Original Link: https://dev.to/drsimplegraffiti/react-search-filter-2ec8

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To