filtering through array of objects

Question

I wanted to filter through my array of objects. Could someone explain me why the first example does not work? When i type into an input it just deletes my objects. However the 2nd example works fine. What is the best way of doing a filtering?

1st example (not working):

   const [data, setData] = useState(JSON.parse(localStorage.getItem("notes") ?? "[]"));
   const [inputValue, setInputValue] = useState("");

   const handleNoteListFilter = (e: React.ChangeEvent<HTMLInputElement>) => {
     setInputValue(e.target.value);
  
     const filteredNotes = data.filter((val) =>
      val.text.toLowerCase().includes(inputValue)
    );

     setData(filteredNotes);
  };

  return (
    <>
      <input  onChange={(e) => handleNoteListFilter(e)} value={inputValue}/>

      {data.map((note) => (
         <Note
          key={note.id}
          note={note}
          onExpandCheck={setIsExpandedCheck}
          onNoteDelete={handleNoteDelete}
          onNoteSave={handleNoteSave}
        />
      ))}

    </>

  )

2nd example(working):

   const [data, setData] = useState(JSON.parse(localStorage.getItem("notes") ?? "[]"));
   const [inputValue, setInputValue] = useState("");

 
  return (
    <>
      <input  onChange={(e) => setInputValue(e.target.value)} value={inputValue}/>

      {data
         .filter((val) => val.text.toLowerCase().includes(inputValue))
         .map((note) => (
          <Note
           key={note.id}
           note={note}
           onExpandCheck={setIsExpandedCheck}
           onNoteDelete={handleNoteDelete}
           onNoteSave={handleNoteSave}
        />
      ))}

    </>

  )

You're setting data with a filtered set of objects with every input change in the first one, and display those remaining objects. In the second you're not setting state - just filtering the objects (which returns a new array), and then mapping over that array. The state is still intact. — Andy
– Andy, Commented Nov 26, 2022 at 18:07

CertainPerformance · Accepted Answer · 2022-11-26 18:09:14Z

In the first approach, every time you change the state of the data, you're filtering out elements from the array. If you filter out an element during one render, it will never appear again in the lifetime of the component. When creating the new state, you need to filter not the current displayed array (which probably has values missing), but the original array from storage.

Also keep in mind that state setters are asynchronous, so

setInputValue(e.target.value);

won't change inputValue until the next render.

const originalData = useMemo(() => JSON.parse(localStorage.getItem("notes") ?? "[]"), []);
const [data, setData] = useState(originalData);
const [inputValue, setInputValue] = useState("");

const handleNoteListFilter = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newInputValue = e.target.value;
    setInputValue(newInputValue);
    const filteredNotes = originalData.filter((val) =>
        val.text.toLowerCase().includes(newInputValue)
    );
    setData(filteredNotes);
};

Collectives™ on Stack Overflow

filtering through array of objects

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related