this TypeError stinks

Small caveat, if you’re not well versed in React or Javascript then reading this will be pointless ;(.

Anyways moving swiftly along, I have recently begun my training toward becoming a master developer (Master Dom has nice ring to it hehehehe :P) and I am using React. I have therefore tried to become one with this. The only issue is ERROR ಠ_ಠ!!!

The error I am going to dive into is the one below (ignore the actual code we’ll get into that soon enough):

Now I know what you’re thinking, “where do I even start”? I will give you sage advice I myself once received, “You must start at the beginning <(-.-)>.”

To begin your oneness with this I recommend the following track

In a hyperbolic time chamber far far away there was the following line of code:

All that’s happening here is I am creating a class called Master with a method called tenThousandHours which takes in an argument called sweat. I then assign sweat to this.sweat. Yeah things are heating up, which obviously means we need another method called grind which log our this.sweat to the console.

Let’s move on and use our class.

You should see the string “sweaty, knees weak, arms are heavy” in the console. Okay great everything is working as expected. The question you should now ask yourself is “What is this?”.

Our this is located in our grind method. Now it’s important to remember that we need to look at where the grind method is used in order to figure out what this is. The rule of thumb is that this will be whatever is to the left of our .method (I put the dot in there for a reason).

In our case, that would mean whatever is to the left of .grind(), which is yoda. Woopdie freakin doo, we finally know what this is ۜ\(סּںסּَ` )/!!!

RULE OF THUMB: this will be whatever is to the left of .method

Now that we’ve broken a sweat, let’s add the following lines of code:

Take a few seconds and consider what will happen remembering our rule of thumb.

Does Yoda even have a thumb…?

Hopefully you guessed it, we get our old friend — ERROR!

In order to diagnose this we should again ask ourselves the question “What is this?”.

Using the methodology we used previously:

  1. Find where our grind function is actually being used. (Line 16)
  2. Look to the left of the .grind
  3. OH NO!!!! There is nothing. Or there is something — it’s called UNDEFINED!

Therefore the reason for our error is that motherbleeping grind doesn’t know what this is anymore ;(. Clearly not working hard enough.

All we need to do to fix this however is to convert our grind method into an arrow function like so:

Now you might be wondering, “Why does the arrow function make this work?” and the answer is simply because the arrow function does not have its own this. The arrow function takes whatever this is referred to outside of it and applies it.

In our case it looks above to where we’ve defined grind and looks to the left of the .method there. Which means this is again yoda.

Therefore our final solution is as follows:

Where you should now see two console logs of ‘sweaty, knees weak, arms are heavy’ without our old friend.

Note: This is not the only way to solve the issue it is however my preferred solution!

In a nutshell:

1.You get TypeError: Cannot read property ‘…’ of undefined.

2.You now know that it is most likely due to the fact that the method you are using has forgotten what this is.

3.Change the method into an arrow function.

4.Found, this has been!