title: my state keeps adding empty elements into its array
body: <p>My setter, for SetPersons, seems to keep adding empty elements into its array for no apparent reason. I am trying to make my phone number list update instantaneously when I update a user's number but it sticks with the old number. Whenever I apply the logic to possibly make the number update instantly, it adds empty elements into my array instead and does not update instantly. Here is the code for each separate component:</p>
  <p>App.js</p>
  <pre><code>import { useEffect, useState, useRef} from 'react'
  import PersonForm from './components/PersonForm'
  import Display from './components/Display'
  import Filter from './components/Filter'
  import phoneService from './services/information'
  
  const App = () =&gt; {
    const [errorMessage, setErrorMessage] = useState('')
    const [persons, setPersons] = useState('')
    const [newName, setNewName] = useState('')
    const [newNumber, setNewNumber] = useState('')
    const [filter, setFilter] = useState('')
    const [filterChecker, setFilterChecker] = useState('')
    
    useEffect(() =&gt; {
      phoneService.getAll()
      .then(people =&gt; setPersons(people))
    }, [])
  
    const handleSubmit = (e) =&gt; {
      e.preventDefault();
      const copy = [...persons]
      const foundNameOrNot = persons.some(el =&gt; el.name === newName)
      const foundNumberOrNot = persons.some(el =&gt; el.number === newNumber)
      const eachPersonsID = persons.map(person =&gt; person.id)
      const newObj = {
        name: newName,
        number: newNumber,
        id: Math.max(eachPersonsID) + 1
      }
      if (foundNameOrNot) {
        if(window.confirm(`${newName} is added to phonebook, replace the old number with a new one.`)) {
          const indexFinder = persons.filter(person =&gt; person.name === newName)
          newObj.id = indexFinder[0].id
          copy[indexFinder[0].id] = newObj
          phoneService.update(indexFinder[0].id, newObj)
          .then(res =&gt; {
            setErrorMessage(`Successfully updated ${newName}s number`)
            setPersons([copy])})
          .catch(err =&gt; {
            setErrorMessage(`Information on ${newName} has already been removed`)
            setFilterChecker(filterChecker.filter(filter =&gt; filter !== newName))})
        }
      } else if (foundNumberOrNot) {
        alert(`${newNumber} belongs to someone else`)
      } else {
        phoneService.create(newObj).then(res =&gt; setPersons([...persons, newObj]))
      }
    }
  
    const handleFilter = (e) =&gt; {
      console.log(persons)
      setFilter(e.target.value)
      const allNames = persons.map(person =&gt; person.name)
      setFilterChecker(allNames.filter(name =&gt; name.toLowerCase().indexOf(filter.toLowerCase()) !== -1))
    }
  
    return (
      &lt;div&gt;
        &lt;h1 className='error'&gt;{errorMessage ? errorMessage : ''}&lt;/h1&gt;
        &lt;h2&gt;Phonebook&lt;/h2&gt;
        &lt;Filter filter={filter} handleFilter={handleFilter}/&gt;
        &lt;h2&gt;add a new&lt;/h2&gt;
        &lt;form onSubmit={handleSubmit}&gt;
          &lt;PersonForm newName={newName} newNumber={newNumber} setNewName={setNewName} setNewNumber={setNewNumber}/&gt;
          &lt;div&gt;
            &lt;button type=&quot;submit&quot;&gt;add&lt;/button&gt;
          &lt;/div&gt;
        &lt;/form&gt;
        &lt;h2&gt;Numbers&lt;/h2&gt;
        &lt;Display filterChecker={filterChecker} persons={persons} setPersons={setPersons} setFilterChecker={setFilterChecker} errorMessage={errorMessage} setErrorMessage={setErrorMessage} /&gt;
      &lt;/div&gt;
    )
  }
  
  export default App
  </code></pre>
  <p>Display.js</p>
  <pre><code>import phoneService from '../services/information'
  import axios from 'axios'
  import { useState } from 'react'
  
  const handleDelete = (i, persons, setPersons, name2, setFilterChecker, errorMessage, setErrorMessage) =&gt; {
      if (window.confirm(`delete ${name2} ?`)) {
          const newArrayOfPeople = persons.filter(person =&gt; person.name !== name2)
          const newArrayOfNames = newArrayOfPeople.map(person =&gt; person.name)
          setFilterChecker(newArrayOfNames)
          setPersons(newArrayOfPeople)
          phoneService.remove(persons[i].id)
          setErrorMessage(`You have successfully deleted ${name2} from the list.`)
          setTimeout(() =&gt; {
              setErrorMessage(null)
          }, 5000)
      }
  }
  
  const Display = ({filterChecker, persons, setPersons, setFilterChecker, errorMessage, setErrorMessage}) =&gt; {
      const copy = [...persons]
      const findNumbers = []
      const findNames = []
      for (let j = 0; j &lt; copy.length; j++) {
          if (copy[j]?.name &amp;&amp; !findNames.includes(copy[j]?.name)) {
              findNames.push(copy[j].name)
          }
      }
      for (let i = 0; i &lt; copy.length; i++) {
          if (copy[i]?.number &amp;&amp; !findNumbers.includes(copy[i]?.number)) {
              findNumbers.push(copy[i]?.number)
          }
      }
    if (filterChecker) {
      return (
        findNames.map((name, i) =&gt; &lt;div&gt;&lt;nobr key={name}&gt;{name} {findNumbers[i]}&lt;/nobr&gt; &lt;button onClick={() =&gt; handleDelete(i, persons, setPersons, name, setFilterChecker, errorMessage, setErrorMessage)}&gt;delete&lt;/button&gt;&lt;/div&gt;)
        )
    } else {
      return ''
    }
  
  }
  
  export default Display
  </code></pre>
  <p>Filter.js</p>
  <pre><code>const Filter = ({filter, handleFilter}) =&gt; {
      return &lt;p&gt;filter shown with &lt;input value={filter} onChange={handleFilter}/&gt;&lt;/p&gt;
    }
    
    export default Filter
  </code></pre>
  <p>PersonForm.js</p>
  <pre><code>import axios from 'axios';
  import phoneService from '../services/information'
  
  const PersonForm = ({newName, newNumber, setNewName, setNewNumber}) =&gt; {
  
    return (
      &lt;div&gt;
        name: &lt;input value={newName} onChange={(e) =&gt; setNewName(e.target.value)}/&gt;
        number: &lt;input value={newNumber} onChange={(e) =&gt; setNewNumber(e.target.value)}/&gt;
      &lt;/div&gt;
    )
  }
  
  export default PersonForm
  </code></pre>
  <p>information.js</p>
  <pre><code>import axios from &quot;axios&quot;
  const baseUrl = 'http://localhost:3002/numbers'
  
  const getAll = () =&gt; {
    const request = axios.get(baseUrl)
  
    return request.then(response =&gt; response.data)
  }
  
  const create = newObject =&gt; {
    const request = axios.post(baseUrl, newObject)
    return request.then(response =&gt; response.data)
  }
  
  const update = (id, newObject) =&gt; {
    const request = axios.put(`${baseUrl}/${id}`, newObject)
    return request.then(response =&gt; response.data)
  }
  
  const remove = (id) =&gt; {
    const request = axios.delete(`${baseUrl}/${id}`)
    return request.then(res =&gt; res.data)
  }
  
  export default { getAll, create, update, remove, baseUrl }
  </code></pre>
  <p>My json-server &quot;db.json&quot;</p>
  <pre><code>{
    &quot;numbers&quot;: [
      {
        &quot;name&quot;: &quot;uvaldo&quot;,
        &quot;number&quot;: &quot;20&quot;,
        &quot;id&quot;: 6
      },
      {
        &quot;name&quot;: &quot;uvaldo zumaya&quot;,
        &quot;number&quot;: &quot;24&quot;,
        &quot;id&quot;: 7
      },
      {
        &quot;name&quot;: &quot;uvaldo zumaya d&quot;,
        &quot;number&quot;: &quot;26&quot;,
        &quot;id&quot;: 8
      }
    ]
  }
  </code></pre>
  <p>Whenever I try to update &quot;uvaldo&quot; phone number to 22, it just stays at 21 then throws errors, this picture is before I hit &quot;add&quot; to avoid the program crashing...</p>
  <p><a href="https://i.stack.imgur.com/CD2rh.png" rel="nofollow noreferrer">https://i.stack.imgur.com/CD2rh.png</a></p>