Implement a searchable list

[bindaldhara]

Create a list of items with an input field that filters the displayed items based on the user’s input.

[kartik-APM]

import { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  const [input, setInput] = useState("");
  const [userData, setUserData] = useState([]);
  const [filterData, setFilterData] = useState([]);

  useEffect(() => {
    fetch("https://dummyjson.com/users")
      .then((res) => res.json())
      .then((data) => {
        setUserData(data.users);
        setFilterData(data.users);
      })
      .catch((err) => console.log(err));
  }, []);

  useEffect(() => {
    const data = userData.filter((user) =>
      user.firstName.toLowerCase().includes(input.toLowerCase())
    );
    setFilterData(data);
  }, [input]);

  return (
    <div className="App">
      <input
        value={input}
        placeholder="input name for filtering..."
        onChange={(e) => setInput(e.target.value)}
      />
      <ul className="list">
        {filterData.map((user) => (
          <li>{user.firstName} </li>
        ))}
      </ul>
    </div>
  );
}

@bindaldhara This might help you!

[sanchit0496]

@kartik-APM Can you raise a PR for the same, will be helpful for others as well

[kartik-APM]

sure! @sanchit0496

[kartik-APM]

@sanchit0496 Can you please provide write access of the repo? I am unable to push my branch.