title: How to delete element in array after socket event in React?
body: <p>I'm having trouble with React state arrays and hooks. When receiving a socket event </p>
  
  <pre class="lang-js prettyprint-override"><code>socket.on("connection request", ({address}) =&gt; {
      let lastConnection = connections
      lastConnection.push({address, actions: &lt;div className="align-right"&gt;
          &lt;MDBBtn color="success" onClick={() =&gt; approveConnection(address, false)}&gt;Approve&lt;/MDBBtn&gt;
          &lt;MDBBtn color="danger" onClick={() =&gt; approveConnection(address, true)}&gt;Refuse&lt;/MDBBtn&gt;
      &lt;/div&gt;})
      setConnections([...lastConnection])
  })
  </code></pre>
  
  <p>I update the list of connections. That part works, but when I try to remove an article from that list using</p>
  
  <pre class="lang-js prettyprint-override"><code>    const approveConnection = (address, banned) =&gt; {
          console.log("removing address " + address + " from " + connections)
          socket.emit("client allow", {address, banned})
          let oldConnections = connections
          oldConnections = oldConnections.filter(a =&gt; a.address !== address)
          setConnections([...oldConnections])
      }
  </code></pre>
  
  <p>It works once, but when I try to remove a second one, the first removed pops back into the list and it continues like this when trying to remove another element.</p>
  
  <p>Can you help me?</p>