Can't Update State After Deleting Item from Backend with Axios and React

Question

Working on a practice phonebook project where the visitor can enter a name and phone number. Utilizing json-server for the backend and React for front end.

The full code is here Phonebook Github Code

The functionality of adding a number works fine, but I'm having issues with a button which allows the visitor to delete a number. When a user clicks on the 'delete' button, it is successfully removed from the backend (file is db.json). However on the frontend, the deleted number isn't removed, and I can see that the state isn't changing.

Any help is appreciated.

Here's my delete function for removing the number from backend

const deletePerson = id => {
  const request = axios.delete(baseUrl + `/` + id);
  return request.then(response => response.data);
};

and this function is being called from a button onClick method

 const deleteNum = event => {
    let personID = event.target.value;
    if (window.confirm("Do you really want to delete?")) {
      personService
        .deletePerson(personID)
        .then(() => {
          setPersons(persons.filter(item => item.id !== personID));
        })
        .catch(error => {
          console.log("Error", error);
        });
    }
  };

and the rest of the relevant code to give this context

const App = () => {
  const [persons, setPersons] = useState([]);
  const [newName, setNewName] = useState("");
  const [newNumber, setNewNumber] = useState("");
  const [filter, setFiltered] = useState("");

  useEffect(() => {
    personService.getAll().then(initialPersons => setPersons(initialPersons));
  }, []);

  console.log("Persons", persons);

  const peopleToShow =
    filter === ""
      ? persons
      : persons.filter(person =>
          person.name.toLowerCase().includes(filter.toLowerCase())
        );

  const rows = () =>
    peopleToShow.map(p => (
      <p key={p.name}>
        {p.name} {p.number}{" "}
        <span>
          <button value={p.id} onClick={deleteNum}>
            delete
          </button>
        </span>
      </p>
    ));

Answer 1

item.id is stored as a number, whereas the personID is taken as a string. Hence, try changing !== to !=.