Typeerror: Cannot Read Property 'scrollto' of Undefined
Apply ES6 Arrow Functions to Resolve "TypeError: Cannot read property '<your property proper noun>' of undefined"
Introduction
If you are a React developer or are but learning to program in JavaScript, you lot might have run into this dreaded fault while trying to read a property off of the this keyword:
1 TypeError: Cannot read holding '<your property name>' of undefined If y'all run into this error while writing React, the odds are high that you are trying to employ a function within some other role and are trying to access the this keyword within the nested function. But why does this happen?
This guide will swoop into how role scope works in JavaScript. You will acquire why this fault occurs and what you can do to prepare it.
The Problem and an Initial Solution
Allow'due south say that you have just written a small React Component that looks similar this:
1 class FishSpecies Extends React . Component { 2 constructor ( props ) { iii super ( props ) ; 4 this . state = { 5 clickCount : 0 6 } ; 7 } 8 ix onFishClicked ( ) { 10 this . setState ( function ( prevState , props ) { 11 return { clickCount : prevState . clickCount + 1 } ; 12 } ) ; thirteen } xiv 15 return ( ) { 16 return ( 17 < ul > 18 { { this . props . fish . map ( function ( fish ) { 19 render < Fish proper name = { fish . name } onClick = { this . onFishClicked } /> 20 } ) } } 21 </ ul > 22 ) 23 } 24 } jsx
At starting time, this component looks pretty straightforward. All this component does is receive a list of fish objects via props and return a Fish component for each one, passing downward a couple of props to each fish. However, if you create this component and add to a real React app, it volition fail. You volition see an error that looks similar:
ane TypeError: Cannot read belongings 'onFishClicked' of undefined Oh no, there it is—the dreaded TypeError! So, why is this happening? This error informs you that this is undefined. Specifically, onClick={this.onFishClicked} fails for this reason. The reason the code is unable to access this hither is because of how scope works in JavaScript.
Under the hood, functions are objects in JavaScript. When you create a function in JavaScript, it gets its ain scope depending upon the context in which it is instantiated. In this case, there really is no context, and then this is actually undefined ! Substantially, the code is running in strict mode inside the React framework and then the global context is non used in favor of no context at all. Bank check out these docs for more info.
And so how can you fix this? Well, y'all have a number of options. In the following section will demonstrate the best and most mod means of fixing this fault.
The ES6 Solution
So you've diagnosed the problem. You demand to make sure that your functions accept admission to the this context of your class component! To practice this, you can utilize ES6 arrow functions.
Apart from making your code more succinct and readable, arrow functions serve some other purpose. It is not immediately obvious, but arrow functions play a big part in how context is passed downwards to functions. Substantially, when you declare a function using the arrow syntax y'all are telling the JavaScript code to bind the current context of this into the new part that is being created. This is not immediately obvious because this bounden is done implicitly as compared to the explicit means of binding this by using the .demark method.
Permit's see how you can use arrow functions to ready your lawmaking!
1 class FishSpecies Extends React . Component { 2 constructor ( props ) { 3 super ( props ) ; 4 this . country = { 5 clickCount : 0 6 } 7 } viii ix onFishClicked ( ) { x this . setState ( ( prevState , props ) => { eleven return { clickCount : prevState . clickCount + ane } ; 12 } ) ; 13 } xiv 15 return ( ) { xvi return ( 17 < ul > 18 { { this . props . fish . map ( fish => { 19 return < Fish proper name = { fish . proper noun } onClick = { this . onFishClicked } /> twenty } ) } } 21 </ ul > 22 ) 23 } 24 } jsx
Voila! It was a simple change to both of the function declarations above, only now your dreaded TypeError is gone because the part you are passing into Array.map within the render function has admission to your component's this context. And this was all achieved simply by changing how yous declared your function.
Conclusion
Pointer functions are a powerful means of binding the current context of this into nested functions. Unfortunately, this major benefit is implicit and then you lot would never know about it but by looking at its usage. Nearly, if not all, of your function declarations within your React components should be declared every bit arrow functions. Doing this volition help y'all to avoid confusion when it comes to the context of this and what it gets leap to.
rodrigueztorrisheacer39.blogspot.com
Source: https://www.pluralsight.com/guides/use-es6-arrow-functions-to-resolve-%22typeerror:-cannot-read-property-'lessyour-property-namegreater'-of-undefined%22
0 Response to "Typeerror: Cannot Read Property 'scrollto' of Undefined"
Post a Comment