Not able to access react state from socket event handler function

Rahul Jain

I have a react app where I am using socket.io for realtime messaging. I am trying to use common socket object across all react functional components, but in event handler function I am not able to access state objects.

Config:

var socket = io(socketEndPoint)
socket.emit('register', cookies)
export { socket }

ChatComponent:

import {socket} from './Config'
export default function ChatComponent(props) {
  const [chats, setChat] = React.useState([{chat_id: 1234}])
  socket.on('message', (data) => {
    console.log(data)
    console.log(chats)
  })
}

console.log(chats) always prints an empty array.

I tried using Context Api but still not help. Is there any way to access react state. Thanks in advance.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Access props and state of current component in React JS within an event handler

From Dev

React: Cannot set state from onchange event handler on form select

From Dev

In React, how to update state AND call a function from a single event?

From Java

Unable to access React instance (this) inside event handler

From Dev

Access variable from event handler in javascript object

From Dev

Access private properties and methods from event handler

From Dev

Access control from its event handler

From Dev

Why can't I access state and props inside event handler

From Dev

How safe is to access this.state inside an event handler?

From Dev

How safe is to access this.state inside an event handler?

From Dev

Filling array on event and access it outside the event function handler

From Dev

Remove event handler function from window?

From Dev

Returning values from event handler function wxPython

From Dev

getting object properties from a event handler function

From Java

React useState hook event handler using initial state

From Dev

Using event handler to update the original state react.js

From Dev

not able to understand how HTTP request handler function is able to access to application object in Tornado

From Dev

How to override event handler function of child component from parent component in react.js

From Dev

How to override event handler function of child component from parent component in react.js

From Java

How to access state from a function

From Dev

Raising a socket.io event from a Restify handler

From Dev

Handler function doesn't have access to updated state variable

From Dev

React: Unable to access child props in parent's event handler

From Dev

Access fresh REDUX state in function of React component

From Dev

React - call handler from var in render function

From Dev

Angular 2 & Typescript: Cannot access class instance from event handler

From Dev

how to access to "$(this)" object from event handler passed to "on" method?

From Dev

Angular 2 & Typescript: Cannot access class instance from event handler

From Dev

Access method from event handler Vue.JS

Related Related

  1. 1

    Access props and state of current component in React JS within an event handler

  2. 2

    React: Cannot set state from onchange event handler on form select

  3. 3

    In React, how to update state AND call a function from a single event?

  4. 4

    Unable to access React instance (this) inside event handler

  5. 5

    Access variable from event handler in javascript object

  6. 6

    Access private properties and methods from event handler

  7. 7

    Access control from its event handler

  8. 8

    Why can't I access state and props inside event handler

  9. 9

    How safe is to access this.state inside an event handler?

  10. 10

    How safe is to access this.state inside an event handler?

  11. 11

    Filling array on event and access it outside the event function handler

  12. 12

    Remove event handler function from window?

  13. 13

    Returning values from event handler function wxPython

  14. 14

    getting object properties from a event handler function

  15. 15

    React useState hook event handler using initial state

  16. 16

    Using event handler to update the original state react.js

  17. 17

    not able to understand how HTTP request handler function is able to access to application object in Tornado

  18. 18

    How to override event handler function of child component from parent component in react.js

  19. 19

    How to override event handler function of child component from parent component in react.js

  20. 20

    How to access state from a function

  21. 21

    Raising a socket.io event from a Restify handler

  22. 22

    Handler function doesn't have access to updated state variable

  23. 23

    React: Unable to access child props in parent's event handler

  24. 24

    Access fresh REDUX state in function of React component

  25. 25

    React - call handler from var in render function

  26. 26

    Angular 2 & Typescript: Cannot access class instance from event handler

  27. 27

    how to access to "$(this)" object from event handler passed to "on" method?

  28. 28

    Angular 2 & Typescript: Cannot access class instance from event handler

  29. 29

    Access method from event handler Vue.JS

HotTag

Archive