Search in React js

import React, { useEffect, useState } from 'react';
import Loader from "../../components/Loader";
import { Link } from 'react-router-dom';

export default function UserList() {
    const [data, setData] = useState([]);
    const [search, setSearch] = useState("");
    const [filterData, setFilterData] = useState([]);

    useEffect(() => {
        getData();
    }, []);

    const getData = async () => {
        try {
            const response = await fetch("https://jsonplaceholder.typicode.com/users");
            const userData = await response.json();
            setData(userData);
            setFilterData(userData);
        } catch (error) {
            console.log(error.message);
        }
    }

    useEffect(() => {
        const user = data.filter((user) =>
            user.name.toLowerCase().includes(search.toLowerCase()) ||
            user.email.toLowerCase().includes(search.toLowerCase()) ||
            user.phone.toLowerCase().includes(search.toLowerCase())
        );
        setFilterData(user)
    }, [search, data])

    return (
        <>
            {data.length > 0
                ?
                <>
                    <section className="container mt-5">
                        <input type="text" className='form-control mb-3' onChange={(e) => setSearch(e.target.value)} placeholder='Find User...' />
                        <div className="card">
                            <div className="card-header">
                                <h5 className='text-center'>User List</h5>
                            </div>
                            <div className="card-body">
                                <table className='table'>
                                    <thead>
                                        <tr>
                                            <th>Id</th>
                                            <th>Name</th>
                                            <th>Email</th>
                                            <th>Contact</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {filterData.map((items) => (
                                            <tr key={items.id}>
                                                <td>{items.id}</td>
                                                <td>{items.name}</td>
                                                <td>{items.email}</td>
                                                <td>{items.phone}</td>
                                                <td>
                                                    <Link to={`/user/${items.id}`}>
                                                        <button className='btn btn-primary'>View</button>
                                                    </Link>
                                                </td>
                                            </tr>
                                        ))}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </section>
                </>
                :
                <Loader />
            }
        </>
    )
}

Comments

Post a Comment

Popular posts from this blog

Create a Connection in Node js and make an API

server.js import express from "express" ; import mongoose from "mongoose" ; import bodyParser from "body-parser" ; import dotenv from 'dotenv' ; import router from "./routes/index.js" ; import cors from "cors" ; dotenv . config (); const app = express (); app . use ( cors ({     origin : '*' , })) app . use ( bodyParser . json ()); app . use ( express . static ( 'public' )); app . use ( '/media' , express . static ( 'media' )); mongoose . connect ( process . env . MONGO_URI , {     useNewUrlParser : true ,     useUnifiedTopology : true , }). then (() => {     console . log ( 'Connected to MongoDB' ); }). catch (( error ) => {     console . error ( 'MongoDB connection error:' , error ); }); app . use ( '/api' , router ); app . get ( '/' , ( req , res ) => {     res . send ( 'Hello, API!' ); }); const PORT = process . env . ...
Read more

React JS | Store form data in localStorage

 Register.jsx import React , { useState } from 'react' ; import { Link , useNavigate } from 'react-router-dom' ; export default function Register () {   const [ user , setUser ] = useState ({     name : "" ,     email : "" ,     password : ""   });   const navigate = useNavigate ();   const handleSubmit = ( e ) => {     e . preventDefault ();     const formData = {       name : user . name ,       email : user . email ,       password : user . password     };     localStorage . setItem ( "userData" , JSON . stringify ( formData ));     navigate ( "/login" );   }   return (     <>       < section className = 'container w-25' >         < div className = "card my-5" >           < div className = "card-header" > ...
Read more

React Redux Toolkit

  1. Install Redux Toolkit and React-Redux: npm install @reduxjs/toolkit react-redux 2. Create a Redux Store: import { configureStore } from "@reduxjs/toolkit" ; import counterReducer from "./slices/counterSlice" ; // Import your slice export const store = configureStore ({   reducer : {     counter : counterReducer , // Add your reducers here   }, }); export default store ; 3. Create a Slice:  import { createSlice } from "@reduxjs/toolkit" ; const initialState = {   count : 0 , }; const counterSlice = createSlice ({   name : "counter" ,   initialState ,   reducers : {     increment : ( state ) => {       state . count += 1 ;     },     decrement : ( state ) => {       state . count -= 1 ;     },     incrementByAmount : ( state , action ) => {       state . count += action . payload ;  ...
Read more