Breaking News: Grepper is joining You.com. Read the official announcement!

reactjs filter data

Engineering Circle answered on January 30, 2024 Popularity 7/10 Helpfulness 1/10

answer reactjs filter data

reactjs filter data

Comment

// src/App.jsx
import { useState, useEffect } from 'react'

// We no longer need the users variable so you can remove it from here

function App() {
  // add this state
  const [apiUsers, setApiUsers] = useState([])
  const [searchItem, setSearchItem] = useState('')
  // set the initial state of filteredUsers to an empty array
  const [filteredUsers, setFilteredUsers] = useState([])


  // fetch the users
  useEffect(() => {
    fetch('https://dummyjson.com/users')
      .then(response => response.json())
      // save the complete list of users to the new state
      .then(data => setApiUsers(data.users))
      // if there's an error we log it to the console
      .catch(err => console.log(err))
  }, [])

  const handleInputChange = (e) => { 
    const searchTerm = e.target.value;
    setSearchItem(searchTerm)

    // filter the items using the apiUsers state
    const filteredItems = apiUsers.filter((user) =>
      user.firstName.toLowerCase().includes(searchTerm.toLowerCase())
    );

    setFilteredUsers(filteredItems);
  }

  return (
    // ... component rendering
  )
}

Popularity 7/10 Helpfulness 1/10 Language javascript

Source: dev.to

Tags: filter javascript reactjs

Link to this answer
Share Copy Link

Contributed on Jan 30 2024

Engineering Circle

0 Answers Avg Quality 2/10

reactjs filter data

Contents

More Related Answers

reactjs filter data

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.