The problem is student state gets updated every time the <input> changes.

Note that filtering results into a derived data coming from the original data.

Thus, NO NEED to store the filtered/derived results as a state.

Rather, you need to have another state for the text used for filtering.

const [student, setStudent] = useState([]);
const [filter, setFilter] = useState(""); // state for the text filter

<input
  placeholder="Search by name"
  type="text"
  className="filter-students"
  onChange={(e) => setFilter(e.target.value)}
/>

{students
  .filter((name) => name.firstName.toLowerCase().includes(filter)) // use filter state
  .map(/* Add elements here */)
}

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top