Have you ever experience reading an existing React code base and wondering why is there a need for in the React component constructor? And what make it more confusing is when not all function has binding syntax. this.functionName = this.functionName.bind(this) If you looking for a quick-fix this problem, one of the solution (and is actually the best solution) would to simply turn all your function to arrow function. Arrow function takes from the outer lexical scope. Here’s an example based on the above. You will need to add to your babel config this this This is not due to React It’s how JavaScript works. There are plenty of articles elsewhere explaining how JavaScript and especially what means(which is how this context get passed over), and how JavaScript bind for you. Instead, I’ll go straight to the in JavaScript. .bind() abyss Reference code for the below Deep down in JavaScript, when you do JavaScript returns a value of . ReferenceType(base, name, strict) where cat.sayHi() Reference Type (cat, "sayHi", true) base is the object name is the property (or method) strict = true when use strict When JavaScript returns Reference Type value of , it means the property will have as context. The last parameter is to decide the value of if the object is . It will be if or if false. (cat, "sayHi", true) sayHi cat this this undefined undefined true global window object However when you do , JavaScript discard away the Reference Type value and only store the function into dogHi. As a result when you execute , it does not know that the value of is dog and throw var dogHi = dog.sayHi dogHi this cannot read property 'name' of undefined Back to the React Example Referencing back to the earlier example, when we do , we are basically assigning callback a function similar to us doing . onClick={this.handleClick} var dogHi = dog.sayHi And to solve this, we could use arrow function rely on outer lexical context (the Animal class) where the function was created: I hope this helps, arrow functions are useful in many more context. I’ll leave those in another article.

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Demystifying this.bind in React

Too Long; Didn't Read

Steve Ng

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Demystifying this.bind in React

Too Long; Didn't Read

Steve Ng

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES