Hackforge Academy

Explanation

Import React hooks. We use useState to store users and filter text, and useEffect to fetch users from the API when the component loads ⚛️.

Code:

import React, { useEffect, useState } 
from "react";

Explanation

Create state variables. One state stores the users list and another stores the search input value for filtering users

Code:

function UsersFilter() {
  const [users, setUsers] = useState([]);
  const [search, setSearch] = useState("");
}

Explanation

Fetch users from API using useEffect and store them in state. This runs once when the component loads.

Code:

useEffect(() => {
  fetch("https://www.apirequest.in")
    .then((res) => res.json())
    .then((data) => setUsers(data));
}, []);

Explanation

Slide 4: Filter users dynamically based on search input using JavaScript filter(). This enables real-time search functionality 📋.

Code:

const filteredUsers = users.filter((user) =>
  user.name.toLowerCase().includes(
search.toLowerCase())
);

Explanation

Add input box and display filtered users using map(). The list updates automatically as the user types .

Code:

return (
  <div>
    <input
      type="text"
      placeholder="Search user..."
      onChange={(e) => 
setSearch(e.target.value)}
    />

    <ul>
      {filteredUsers.map((user) => (
        <li key={user.id}>
          {user.name}
        </li>
      ))}
    </ul>
  </div>
);
}

export default UsersFilter;