Accessing event.target inside callback in react

by

SyntheticEvent.

As per DOC:

The SyntheticEvent is pooled. This means that the SyntheticEvent
object will be reused and all properties will be nullified after the
event callback has been invoked. This is for performance reasons.

Example:

function onClick(event) {
   console.log(event.type); // => "click"
   const eventType = event.type; // => "click"

   setTimeout(function() {
      console.log(event.type); // => null
      console.log(eventType); // => "click"
   }, 0);    
}

How to access the values inside callback?

Storing value in a variable:

If you want to access the value in timeout callback function then store the value in a variable and use that variable instead of directly using the event object.

function onClick(event) {

   console.log(event.type); // => "click"

   const { type } = event;

   setTimeout(function() {
      console.log(type);   // => click
   }, 0);    
}

Using event.persist():

If you want to access the event properties in an asynchronous way, you should call event.persist() on the event, which will remove the synthetic event from the pool and allow references to the event to be retained by user code.

function onClick(event) {

   event.persist();

   console.log(event.type); // => "click"

   setTimeout(function() {
      console.log(event.type); // => click
   }, 0);    
}

More Related Contents:

  1. What is component in reactjs?
  2. React setState not updating state
  3. Rerender view on browser resize with React
  4. React Context vs React Redux, when should I use each one? [closed]
  5. Correct way to push into state array
  6. How to handle the `onKeyPress` event in ReactJS?
  7. Why is useState not triggering re-render?
  8. react-router getting this.props.location in child components
  9. Is there a generic way to set state in React Hooks? How to manage multiple states?
  10. React Function Components with hooks vs Class Components
  11. How do I use external script that I add to react JS?
  12. Can I execute a function after setState is finished updating?
  13. where is create-react-app webpack config and files?
  14. How to print React component on click of a button?
  15. How to render Streamable image on React coming from FastAPI server?
  16. unable to deploy next js to azure
  17. react-router-dom v6 Routes showing blank page
  18. react-router (v4) how to go back?
  19. how to set up an inline svg with webpack
  20. How can I dispatch function in redux?
  21. stop dragging after a limit has reached
  22. Equivalent to componentDidUpdate using React hooks
  23. How to Call a Function inside a Render in React/Jsx
  24. reactjs event listener beforeunload added but not removed
  25. Browser Detection in ReactJS
  26. React – Dynamically Import Components
  27. passing data from child to parent component – react – via callback function
  28. FastAPI is not returning cookies to React frontend
  29. React Functional component: calling as function vs. as component
  30. Enzyme simulate an onChange event

Leave a Comment