score:1

Accepted answer

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 */)
}

score:1

don't filter your state and save it back over itself, this doesn't allow you to get back to your original state. instead, use a separate piece of state to save the filter value and filter in-line when rendering state so you can keep your student data intact and unmutated by filtering.

function app() {
  const [student, setstudent] = usestate([]);
  const [filtervalue, setfiltervalue] = usestate(""); // <-- filter state

  return (
    <>
      <input
        placeholder="search by name"
        type="text"
        classname="filter-students"
        onchange={(e) => setfiltervalue(e.target.value)} // <-- update filter state
      />
      {student
        .filter((name) => { // <-- filter inline
          return name.firstname.tolowercase().includes(e.target.value);
        })
        .map((students) => {
          let total = 0;
          for (let i = 0; i < students.grades.length; i++) {
            total += parseint(students.grades[i]);
          }

          const average = total / students.grades.length;
          console.log(average);

          return (
            <ul classname="student-container">
              <img classname="student-img" src={students.pic} />

              <div classname="student-column">
                <li classname="student-item">
                  {" "}
                  {students.firstname} {students.lastname}
                </li>
                <li classname="student-item">email: {students.email}</li>
                <li classname="student-item">company: {students.company}</li>
                <li classname="student-item">skill: {students.skill}</li>

                <li classname="student-item">average: {average}%</li>
              </div>
            </ul>
          );
        })}
    </>
  );
}

Related Query

More Query from same tag