CODEWITHSUNDEEP
reactjsreact-hooks
Óscar Contreras
Óscar Contreras

Reputation: 105

Array with useState not updating value inside websocket function

I am trying to change the state of an array when an event happens in the browser, specifically when the websocket is triggered, the problem is that my array keeps the original state and never changes. Thanks for your help

  export default function StreamPanel(){

   const [streamsNotRead, setStreamsNotRead] = useState(["bye"]);

   function customerInfo () {
        return new Promise(resolve => {
        setTimeout(() => { 
    
        const cable = ActionCable.createConsumer(`wss:/aplace`)
        const sub = cable.subscriptions.create('SomeChannel', {
          received: handleReceiveNewName
        })
        handleClose()
        resolve()   
      },3000);
    });
      }

   const handleReceiveNewName = m => {
        setStreamsNotRead(streamsNotRead => [...streamsNotRead, "hello" ]);
        console.log(streamsNotRead)
   }

   return(</div>)
}

The function handleReceiveNewName is triggered when a certain event (the cable) in the browser happens, but when I want to access the value in the console.log "hello" is never added

Upvotes: 1

Views: 108

Answers (1)

Musa
Musa

Reputation: 97672

Pass the new array directly to the function instead of a function returning the new array

const handleReceiveNewName = m => {
    setStreamsNotRead([...streamsNotRead, "hello" ]);
    console.log(streamsNotRead)
}

Upvotes: 1

Related Questions