React Object Props Typeerror: Cannot Read Property 'imgurl' of Undefined
Use ES6 Arrow Functions to Resolve "TypeError: Cannot read property '<your property name>' of undefined"
Introduction
If you are a React developer or are just learning to programme in JavaScript, you might accept run into this dreaded error while trying to read a property off of the this keyword:
1 TypeError: Cannot read belongings '<your property name>' of undefined If you encounter this error while writing React, the odds are high that you are trying to apply a role inside another function and are trying to access the this keyword inside the nested function. But why does this happen?
This guide will dive into how function scope works in JavaScript. You will learn why this mistake occurs and what yous tin exercise to fix it.
The Problem and an Initial Solution
Allow's say that you accept but written a small-scale React Component that looks like this:
1 grade FishSpecies Extends React . Component { 2 constructor ( props ) { 3 super ( props ) ; 4 this . state = { v clickCount : 0 six } ; 7 } viii 9 onFishClicked ( ) { 10 this . setState ( function ( prevState , props ) { 11 return { clickCount : prevState . clickCount + 1 } ; 12 } ) ; 13 } fourteen 15 render ( ) { 16 return ( 17 < ul > 18 { { this . props . fish . map ( function ( fish ) { xix return < Fish proper noun = { fish . name } onClick = { this . onFishClicked } /> xx } ) } } 21 </ ul > 22 ) 23 } 24 } jsx
At first, this component looks pretty straightforward. All this component does is receive a list of fish objects via props and render a Fish component for each one, passing downwards a couple of props to each fish. Still, if you create this component and add to a real React app, it volition fail. Y'all will encounter an mistake that looks like:
1 TypeError: Cannot read holding '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 lawmaking is unable to access this here is considering of how scope works in JavaScript.
Under the hood, functions are objects in JavaScript. When you create a function in JavaScript, it gets its own scope depending upon the context in which it is instantiated. In this case, there actually is no context, and then this is actually undefined ! Essentially, the code is running in strict manner inside the React framework and so the global context is not used in favor of no context at all. Check out these docs for more info.
So how can you fix this? Well, you have a number of options. In the post-obit section will demonstrate the best and virtually modern means of fixing this mistake.
The ES6 Solution
So you've diagnosed the problem. Yous need to make sure that your functions accept access to the this context of your class component! To do this, you can utilize ES6 arrow functions.
Autonomously from making your code more succinct and readable, arrow functions serve some other purpose. Information technology is not immediately obvious, but arrow functions play a big function in how context is passed down to functions. Essentially, when you declare a role using the pointer syntax y'all are telling the JavaScript code to bind the current context of this into the new function that is being created. This is not immediately obvious because this binding is done implicitly as compared to the explicit means of binding this by using the .bind method.
Allow's see how you can employ arrow functions to fix your code!
ane class FishSpecies Extends React . Component { 2 constructor ( props ) { 3 super ( props ) ; iv this . land = { 5 clickCount : 0 half-dozen } 7 } eight nine onFishClicked ( ) { ten this . setState ( ( prevState , props ) => { eleven return { clickCount : prevState . clickCount + one } ; 12 } ) ; 13 } 14 15 render ( ) { xvi return ( 17 < ul > xviii { { this . props . fish . map ( fish => { xix return < Fish proper noun = { fish . proper noun } onClick = { this . onFishClicked } /> xx } ) } } 21 </ ul > 22 ) 23 } 24 } jsx
Voila! It was a elementary modify to both of the function declarations in a higher place, but now your dreaded TypeError is gone because the function you are passing into Array.map within the render function has access to your component'due south this context. And this was all accomplished simply by changing how you declared your function.
Conclusion
Arrow functions are a powerful means of bounden the current context of this into nested functions. Unfortunately, this major benefit is implicit and then y'all would never know about information technology only by looking at its usage. Nigh, if non all, of your function declarations within your React components should be declared as arrow functions. Doing this will assistance y'all to avoid confusion when it comes to the context of this and what it gets bound to.
Source: https://www.pluralsight.com/guides/use-es6-arrow-functions-to-resolve-%22typeerror:-cannot-read-property-%27lessyour-property-namegreater%27-of-undefined%22
0 Response to "React Object Props Typeerror: Cannot Read Property 'imgurl' of Undefined"
Post a Comment