How does event handlers with arrow functions achieve context binding

by

As the MDN docs states

An arrow function does not have its own this; the this value of the
enclosing execution context is used

So you would think of 

onClick={(e) => this.goToStore(e)}

as being an anonymous function which can be written as 

    (e) => { 
         return this.goToStore(e) 
    }

Now here in this anonymous function this refers to the lexical context of the render function which in turn refers to the React Class instance.

Now

Context is most often determined by how a function is invoked. When a function is called as a method of an object, this is set to the object the method is called on:

var obj = {
    foo: function() {
        return this;   
    }
};

obj.foo() === obj; // true

The same principle applies when invoking a function with the new operator to create an instance of an object. When invoked in this manner, the value of this within the scope of the function will be set to the newly created instance:

function foo() {
    alert(this);
}

foo() // window
new foo() // foo

When called as an unbound function, this will default to the global context or window object in the browser.

So here since the function is called like this.goToStore() this inside it will refer to the context of React component.

However when you write onClick={this.goToStore}, the function is not executed but a reference of it is assigned to the onClick function, which then later invokes it, causing this to be undefined inside the function as the function runs on the context of the window object.

Now even though onClick={(e) => this.goToStore(e)} works, whenever render is called a new function instance is created. In your case its easy to avoid, just by created the function goToStore using arrow function syntax.

goToStore = (e) => {

}

Check the docs for more details on this

More Related Contents:

  1. React: “this” is undefined inside a component function
  2. “this” is undefined inside map function Reactjs
  3. TypeError: Cannot read property ‘setState’ of undefined
  4. How to bind onclick handlers to `this` properly on React
  5. Build an HTML table using React from arrays [closed]
  6. Why can’t I directly modify a component’s state, really?
  7. How to update nested state properties in React
  8. How to delete an item from state array?
  9. React / JSX Dynamic Component Name
  10. How can I use multiple refs for an array of elements with hooks?
  11. console log the state after using useState doesn’t return the current value [duplicate]
  12. How do I pass the this context to a function?
  13. ESLint Parsing error: Unexpected token
  14. How to add custom html attributes in JSX
  15. When is it appropriate to use a constructor in REACT?
  16. Use Async/Await with Axios in React.js
  17. How to prevent re-rendering of components that have not changed?
  18. In ReactJS, why does `setState` behave differently when called synchronously?
  19. ‘this’ keyword, not clear
  20. Adding a new line in a JSX string inside a paragraph – React
  21. Axios posting params not read by $_POST
  22. Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop
  23. React.js Serverside rendering and Event Handlers
  24. es6 – import all named module without alias
  25. Detect change in query param react-router-dom v4.x and re-render component
  26. Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode
  27. How to set initial state for useState Hook in jest and enzyme?
  28. Webpack 5 – Uncaught ReferenceError: process is not defined
  29. Using document.querySelector in React? Should I use refs instead? How?
  30. JS call static method from class

Leave a Comment