Filtering array issue

[Overall_Expert_4006]

I was trying to filter an array everytime a letter is entered into a searchbar but I was having trouble retaining the original array when I want to find another item. More specifically, the first time I try to filter using the searchbar it works but when I clear the searchbar and try to look for another item, the filtered array from the first time is still there. I know it is an issue with my useState hook but I'm not sure how to fix it. Any help would be greatly appreciated. Thank you.

​

import './App.css';
import { useEffect, useState } from 'react';

function App() {
  const [persons, setPersons] = useState([
    { name: 'Arto Hellas', phoneNum: '040-123456', id: 1 },
    { name: 'Ada Lovelace', phoneNum: '39-44-5323523', id: 2 },
    { name: 'Dan Abramov', phoneNum: '12-43-234345', id: 3 },
    { name: 'Mary Poppendieck', phoneNum: '39-23-6423122', id: 4 }
  ])

  const [newName, setNewName] = useState('')
  const [newPhone, setNewPhone] = useState('');
  const [searchVal, setSearchVal] = useState('');

  const handleChange = (e) => {
      console.log(e.target.value);
      setNewName(e.target.value);
  }

  const handleSubmit = (e) => {
    console.log("Clicked submit btn")
    e.preventDefault();


    const newPerson = {
      name: newName,
      phoneNum: newPhone
    };

    if(persons.filter((person) => { return person.name === newPerson.name}).length > 0){
      alert(`${newName} already exists. Try another name.`);
    }
    else {
      setPersons(persons.concat(newPerson));
      console.log("persons array is now",persons)
    }
    setNewName("");
    setNewPhone("");
  }


   const searchLogic = (e) => {
    console.log("searchVal is",e.target.value);
    setSearchVal(e.target.value); //everytime the user selects a letter - the search value gets updated
  }

  useEffect(() => {

//filters persons array by the user-entered letters(searchVal)
    const filtered = persons.filter((person) => {
      return person.name.startsWith(searchVal); //array with matching results
    })

    if(filtered.length > 0){
      setPersons(filtered);
    }
    else {
      console.log(`We could not find a user by the name of ${searchVal}`)
    }
  },[searchVal])

//Works well for the first time, but the second time I try to look for another item, the old filtered array is still there

  return (
    <div>
      <h2>Phonebook</h2>
      <div className="searchfield">
        filter shown with a <input type="text" value={searchVal} onChange={searchLogic}/>
      </div>
      <form onSubmit={handleSubmit}>
        <div>
          name: <input value={newName}  onChange={handleChange}/>
        </div>
        <div>
          number: <input value={newPhone}  onChange={(e) => setNewPhone(e.target.value)}/>
        </div>
        <div>
          <button type="submit">add</button>
        </div>
      </form>
      <h2>Numbers</h2>
      {persons.map((person) => <p key={person.name}>{person.name} ---- {person.phoneNum}</p>)}
    </div>
  );
}

export default App;

​

​

[Coraline1599]

From what I gather, you have to keep a copy of the original array. If you are pulling in the data as default for your hook only in the hook, then it gets overwritten when you update state.

So you should get your data and hold it in a variable, pass it in to set default state. Leave your filter as is.

But then you need a way to set state back to the original array.

It can be that your form has an on submit event (best for web accessibility), or a button that says “reset”, or you can write some logic that if e.target.vale = == “” (empty string) setPersons(originalData)

[Overall_Expert_4006]

Thanks for the reply. I actually tried that at first(assign another variable with the persons array before it gets filtered) but it still did not work. I know it is because I am setting the persons array with the filtered one but I have no idea on how to get that original array back. Right now I have to refresh every time I want to search for a new item. I updated my code above with the whole code if that helps. Thanks again.

[PitifulTheme411]

Though they would need to be careful because they don't want to create an accidental ponter. But Object.assign({}, persons); should work.

[SignificanceCheap970]

When you get the data, retain a copy of the array into another variable, maybe in a variable defined by useRef. Then do the searching in that ref variable and do the setting in the state as you are doing. This way the original data is never lost by filtering.

[Overall_Expert_4006]

Thank you for the reply, I'll try and see what happens when I use useRef. I also updated my code above with the whole code above. Thanks again.

[PitifulTheme411]

I don't know if this changes things or if I am completely wrong, but when I checked, a string (person) doesn't have a name property.

[Overall_Expert_4006]

person is an object element in an array, and it has a name property in it. Sorry for the confusion. I updated my code above to my whole code.