User not being deleted upon click of delete button

Question

I am developing a simple phonebook application and whenever I type in some characters into the filter search bar, users should populate if they at least include some of the characters being typed into the filter search bar. Whenever their name pops up, their numbers pops up as well with a delete button next to their phone number.

However, whenever I click the delete button - nothing happens and the user is still present. I am trying to implement functionality to have a user be deleted, or disappear from the screen upon clicking the delete button.

Here is the code to the logic behind the searching and deleting of users:

import { useEffect, useState } from 'react'
import phoneService from '../services/information'

const handleDelete = (i, persons, setPersons, name2, setFilterChecker, setErrorMessage, setCounter, counter, findNames) => {
    if (window.confirm(`delete ${name2} ?`)) {
        const newArrayOfPeople = persons.filter(person => person.number !== findNames.number)
        console.log(newArrayOfPeople)
        const newArrayOfNames = newArrayOfPeople.map(person => person.name)
        setFilterChecker(newArrayOfNames)
        setPersons(newArrayOfPeople)
        phoneService.remove(persons[i].id)
        setErrorMessage(`You have successfully deleted ${name2} from the list.`)
        setCounter(counter + 1)
    }
}

const Display = ({persons, setPersons, setFilterChecker, setErrorMessage, filter}) => {
    const [counter, setCounter] = useState(0)
    const findNames = []
    const findNumbers = []
    const copy = [...persons]

    for (let j = 0; j < copy.length; j++) {
        if ((copy[j].name).includes(filter)) {
            findNames.push(copy[j].name)
            findNumbers.push(copy[j].number)
        }
    }
  
    if (filter) {
        return (
        findNames.map((name, i) => <div id='parentContainer'><nobr key={name}>{name} {findNumbers[i]}</nobr> <button onClick={() => handleDelete(i, persons, setPersons, name, setFilterChecker, setErrorMessage, setCounter, counter, findNames)}>delete</button></div>)
        )
    } else {
        return ''
    }

}

export default Display

Answer 1

It is because you are looking for number in findNames instead of findNumbers

import { useEffect, useState } from 'react'
import phoneService from '../services/information'

const handleDelete = (i, persons, setPersons, name2, setFilterChecker, setErrorMessage, setCounter, counter, findNames) => {
    if (window.confirm(`delete ${name2} ?`)) {
        const newArrayOfPeople = persons.filter(person => person.number !== findNumbers.number)
        console.log(newArrayOfPeople)
        const newArrayOfNames = newArrayOfPeople.map(person => person.name)
        setFilterChecker(newArrayOfNames)
        setPersons(newArrayOfPeople)
        phoneService.remove(persons[i].id)
        setErrorMessage(`You have successfully deleted ${name2} from the list.`)
        setCounter(counter + 1)
    }
}

const Display = ({persons, setPersons, setFilterChecker, setErrorMessage, filter}) => {
    const [counter, setCounter] = useState(0)
    const findNames = []
    const findNumbers = []
    const copy = [...persons]

    for (let j = 0; j < copy.length; j++) {
        if ((copy[j].name).includes(filter)) {
            findNames.push(copy[j].name)
            findNumbers.push(copy[j].number)
        }
    }
  
    if (filter) {
        return (
        findNames.map((name, i) => <div id='parentContainer'><nobr key={name}>{name} {findNumbers[i]}</nobr> <button onClick={() => handleDelete(i, persons, setPersons, name, setFilterChecker, setErrorMessage, setCounter, counter, findNames)}>delete</button></div>)
        )
    } else {
        return ''
    }

}

Answer 2

I had to filter out the specified individual to be removed via a filter method on persons , and once I isolated that individual, I placed him inside the phoneService.remove() method which properly removed the individual.

Here is the updated code:

import phoneService from '../services/information'

const handleDelete = (i, persons, setPersons, name2, setFilterChecker, setErrorMessage) => {
    if (window.confirm(`delete ${name2} ?`)) {
        const newArrayOfPeople = persons.filter(person => person.name !== name2)
        const removedPerson = persons.filter(person => person.name === name2)
        const newArrayOfNames = newArrayOfPeople.map(person => person.name)
        setFilterChecker(newArrayOfNames)
        setPersons(newArrayOfPeople)
        console.log(removedPerson[0].id)
        phoneService.remove(removedPerson[0].id)
        setErrorMessage(`You have successfully deleted ${name2} from the list.`)
    }
}

const Display = ({persons, setPersons, setFilterChecker, setErrorMessage, filter}) => {
    const findNames = []
    const findNumbers = []
    const copy = [...persons]

    for (let j = 0; j < copy.length; j++) {
        if ((copy[j].name).includes(filter)) {
            findNames.push(copy[j].name)
            findNumbers.push(copy[j].number)
        }
    }
  
    if (filter) {
        return (
        findNames.map((name, i) => <div id='parentContainer'><nobr key={name}>{name} {findNumbers[i]}</nobr> <button onClick={() => handleDelete(i, persons, setPersons, name, setFilterChecker, setErrorMessage)}>delete</button></div>)
        )
    } else {
        return ''
    }

}

export default Display

Performing it this way, alot of lines of code were removed and states and use effects were not required!