1 00:00:00,930 --> 00:00:04,910 In the last section we put together a consummate handler on our form element. 2 00:00:05,070 --> 00:00:09,570 So we define the prop we pass to a callback function and then we saw several times that the called EQ 3 00:00:09,570 --> 00:00:11,970 function was successfully being called. 4 00:00:12,150 --> 00:00:16,800 We note that it was being called successfully because when we tried to submit the form we saw that after 5 00:00:16,800 --> 00:00:22,150 we added events pre-event default the browser no longer automatically refresh itself. 6 00:00:22,170 --> 00:00:26,400 So at some point in time on form Smit was working just perfectly. 7 00:00:26,400 --> 00:00:32,270 But then as soon as we added console log this odd status term we started to see an error message appear. 8 00:00:32,520 --> 00:00:37,610 So in this video I want to start to figure out exactly why we are seeing this error message. 9 00:00:37,680 --> 00:00:43,800 I'm going to tell you right now that this error message and the reason for it is going to be the absolute 10 00:00:43,980 --> 00:00:49,840 most common error message that you see in every re-act project you're ever going to work on. 11 00:00:49,980 --> 00:00:54,200 Without a doubt you're going to see this error message all the darn time. 12 00:00:54,210 --> 00:00:58,410 So I want to make sure that you really understand why we are seeing this error message and exactly how 13 00:00:58,410 --> 00:00:59,600 we are fixing it. 14 00:00:59,910 --> 00:01:04,990 Let's first examine the message itself and get a better idea of the root cause of this issue. 15 00:01:05,310 --> 00:01:10,470 So the message here says cannot read property state of undefined. 16 00:01:10,520 --> 00:01:12,230 This is not a super clear message. 17 00:01:12,260 --> 00:01:17,090 I'll be honest if I were in charge of writing error messages myself I would probably rephrase this as 18 00:01:17,090 --> 00:01:22,910 something like I cannot access the property state on the value undefined. 19 00:01:22,910 --> 00:01:24,400 Now even that's maybe not the best. 20 00:01:24,400 --> 00:01:28,580 So let me give you a quick code example inside my javascript counsel over here on the right hand side. 21 00:01:28,940 --> 00:01:34,380 As a quick reminder undefined is a value is a value inside of javascript. 22 00:01:34,520 --> 00:01:40,520 If you ever tried to access a property on undefined such as undefined States you're going to get the 23 00:01:40,520 --> 00:01:42,990 same error message that we just saw back over here. 24 00:01:43,220 --> 00:01:48,500 Cannot read propertys state of undefined so this error message right here is essentially telling us 25 00:01:48,710 --> 00:01:52,430 is we are trying to reference undefined state. 26 00:01:52,430 --> 00:01:57,520 But as you can see with our code over here it says this not state not undefined. 27 00:01:57,980 --> 00:02:04,940 So the root issue here is that javascript for some crazy reason thinks that inside of this on form Smet 28 00:02:04,940 --> 00:02:10,980 function this is not equal to our instance of the search for a class. 29 00:02:11,000 --> 00:02:14,410 It thinks that this is equal to the value undefined. 30 00:02:14,450 --> 00:02:16,240 That's the root issue here. 31 00:02:16,550 --> 00:02:20,870 So to really solve this problem and really understand the error message here's two things we have to 32 00:02:20,870 --> 00:02:21,880 go through first. 33 00:02:22,130 --> 00:02:27,020 We're going to first get a quick review of what this keyword is used for inside of a class and then 34 00:02:27,020 --> 00:02:32,280 after that we're going to get a quick review on how the value of this is determined inside of a function. 35 00:02:32,400 --> 00:02:33,500 Case number 1. 36 00:02:33,530 --> 00:02:36,530 What is the value this used for in a class. 37 00:02:36,530 --> 00:02:41,210 Here is a diagram of our instance of the search bar that is created anytime we render a search bar to 38 00:02:41,210 --> 00:02:42,070 the screen. 39 00:02:42,290 --> 00:02:48,810 The search bar instance has a couple different properties such as state render on forms submit inside 40 00:02:48,930 --> 00:02:52,050 of any code that we write inside of the search bar. 41 00:02:52,050 --> 00:02:53,270 We can reference the keyword. 42 00:02:53,310 --> 00:02:58,220 This this is a reference back to the class itself. 43 00:02:58,500 --> 00:03:03,510 So when we say this for essentially saying give me a reference to the instance of search part that I 44 00:03:03,510 --> 00:03:10,350 am writing code inside of we can then use that to get direct access to our state render or on form submit 45 00:03:10,350 --> 00:03:11,150 properties. 46 00:03:11,160 --> 00:03:17,340 So for example I could say this state and it will give me access to the state object that belongs to 47 00:03:17,370 --> 00:03:22,740 this particular instance of the search bar and we've already done that several times inside of our render 48 00:03:22,740 --> 00:03:23,340 method. 49 00:03:23,340 --> 00:03:25,100 Here is this not states. 50 00:03:25,120 --> 00:03:27,700 Turn right here is this thought forms submit. 51 00:03:27,810 --> 00:03:28,440 So without a doubt. 52 00:03:28,470 --> 00:03:31,430 In some cases using this works just fine. 53 00:03:31,590 --> 00:03:36,740 It seems like the one exception is here inside of the on forms that function. 54 00:03:36,930 --> 00:03:39,570 So I do understand why it's going wrong right here. 55 00:03:39,570 --> 00:03:45,910 We have to get a better idea of how the value of this is determined in a function to do so. 56 00:03:45,910 --> 00:03:51,070 I want to give you a very quick code example that's basic going to exactly mirror this scenario that 57 00:03:51,070 --> 00:03:52,090 we are in right now. 58 00:03:53,030 --> 00:03:56,810 All right something to pull open a quick little code editor that we can very quickly write some code 59 00:03:56,810 --> 00:03:59,370 into. 60 00:03:59,440 --> 00:04:03,000 I'll put a link to it on the screen in case you want to write some code along with me. 61 00:04:03,040 --> 00:04:04,350 So here is a link to it. 62 00:04:04,360 --> 00:04:06,760 The address is my full name Stephen Grider. 63 00:04:06,760 --> 00:04:09,420 Notice how I don't have an end to my last name. 64 00:04:09,480 --> 00:04:10,040 Get help. 65 00:04:10,140 --> 00:04:14,830 Io not com at so slash playgrounds. 66 00:04:14,880 --> 00:04:15,090 All right. 67 00:04:15,090 --> 00:04:16,380 So here is that Ed.. 68 00:04:16,740 --> 00:04:21,930 Now inside of here we can very quickly put some code on the left hand side like let's say Konst my value 69 00:04:21,930 --> 00:04:28,020 equals 10 and then every time that you put a javascript expression underneath that that results in some 70 00:04:28,020 --> 00:04:30,920 value it will be printed automatically on the right hand side. 71 00:04:31,140 --> 00:04:34,340 So if I do my value I see 10 is printed. 72 00:04:34,660 --> 00:04:36,400 Then I can do my value divide by 10. 73 00:04:36,420 --> 00:04:39,930 I get one my value times 99. 74 00:04:39,950 --> 00:04:46,890 I get 9 9 9 0 and if I go and change the original value appear it's going to update all those expressions 75 00:04:46,920 --> 00:04:47,880 as well. 76 00:04:47,880 --> 00:04:53,570 So this is just a little tool that we can use to very easily see values printed out for any given expression. 77 00:04:53,980 --> 00:04:59,370 OK so now let's get a good example of how the value of this works inside of a class and how it gets 78 00:04:59,370 --> 00:05:01,990 determined inside of a method. 79 00:05:02,010 --> 00:05:07,290 I'm going to create a little dummy class here called car and inside of it I'm going to add two different 80 00:05:07,290 --> 00:05:08,080 methods. 81 00:05:08,300 --> 00:05:09,060 I'll say set. 82 00:05:09,060 --> 00:05:09,380 Drive. 83 00:05:09,390 --> 00:05:15,200 Sound that's going to be a function that gets an argument called Sound and I'm going to assign it to 84 00:05:15,330 --> 00:05:22,650 this not sound like so and then after that I'll define a second method called Drive. 85 00:05:23,010 --> 00:05:27,040 And any time we call that I'm going to return this sound. 86 00:05:27,390 --> 00:05:32,610 So essentially it's just a dummy little class gives us the ability to set a value and then later on 87 00:05:32,610 --> 00:05:34,190 return that value. 88 00:05:34,230 --> 00:05:35,920 Essentially that's what's going on. 89 00:05:36,020 --> 00:05:39,250 Forgetting all the car and drive sound terminology. 90 00:05:39,330 --> 00:05:49,890 So after that I'm going to create a car with new car and then going to set the drive sound with vroom. 91 00:05:50,210 --> 00:05:55,430 So now anytime that I called Drive I'm going to see froom print up over here. 92 00:05:55,430 --> 00:05:55,700 All right. 93 00:05:55,700 --> 00:06:01,720 So we now have a good example that makes use of the this keyword inside of a method on a class. 94 00:06:01,760 --> 00:06:07,220 Let me now tell you the very important rule to understand when ever you want to figure out what the 95 00:06:07,220 --> 00:06:12,650 value of this is going to be equal to inside of a method on a class. 96 00:06:12,650 --> 00:06:15,380 We look not at the method itself. 97 00:06:15,380 --> 00:06:16,610 We don't look at this method. 98 00:06:16,640 --> 00:06:18,760 We look at where we call the method. 99 00:06:19,010 --> 00:06:23,960 So we look down here recalling drive right here. 100 00:06:23,960 --> 00:06:27,500 Now here's the rule of thumb we find the function name it is drive. 101 00:06:27,710 --> 00:06:33,950 We look to the dot to the left of the function and then we look at the variable that is reference to 102 00:06:33,950 --> 00:06:35,000 the left hand side. 103 00:06:35,800 --> 00:06:41,530 This right here this is what this is going to be equal to inside the drive function. 104 00:06:41,560 --> 00:06:48,250 So this right here does not sound like this that this is going to be equal to the car variable or the 105 00:06:48,250 --> 00:06:50,510 instance of the car class. 106 00:06:50,830 --> 00:06:56,110 That is a rule that is going to Styne stand up like 95 percent of the time in javascript. 107 00:06:56,120 --> 00:07:00,490 Anytime you want to figure out what the value of this is going to be inside of a function you don't 108 00:07:00,490 --> 00:07:05,770 look at the function you look at where the function is called and you look at what is to the left of 109 00:07:05,770 --> 00:07:08,120 the dot when the function gets called. 110 00:07:08,140 --> 00:07:09,640 In this case it's car. 111 00:07:09,640 --> 00:07:15,070 So when the drive gets cold this is equal to our instance of the car. 112 00:07:15,070 --> 00:07:17,860 Now I can give you a very good example of this in action. 113 00:07:17,860 --> 00:07:22,150 Let me put together another little example here just to make sure that you understand that this is 100 114 00:07:22,150 --> 00:07:23,770 percent true. 115 00:07:23,770 --> 00:07:28,180 I'm going to create a object down here a simple object called Truck. 116 00:07:28,450 --> 00:07:35,950 I'm going to give this thing a sound property of putt putt putt and I'm going to rip off the drive function 117 00:07:35,980 --> 00:07:40,570 from my class car or from my instance of car right here I'm going to repeat the function out there and 118 00:07:40,570 --> 00:07:42,600 assign it to this truck object. 119 00:07:42,670 --> 00:07:49,400 So I say drive RCO let's be really explicit here I'm going to say drive my truck and I'm going to assign 120 00:07:49,420 --> 00:07:57,670 that value from car not drive and now underneath that I'll do truck drive my truck. 121 00:07:57,670 --> 00:07:59,160 So I'm not going to call it just yet. 122 00:07:59,170 --> 00:08:03,220 I want you to tell me what do you think the value will be printed out here. 123 00:08:03,400 --> 00:08:06,030 When I invoke this function What's the rule. 124 00:08:06,100 --> 00:08:07,810 Well look at this function. 125 00:08:08,030 --> 00:08:10,360 We look at what is still after the dot. 126 00:08:10,400 --> 00:08:12,970 This is what this are right here. 127 00:08:13,010 --> 00:08:17,660 I know using the word this too much here is really confusing but I know just look at what we have left 128 00:08:17,710 --> 00:08:18,730 to the dot. 129 00:08:18,920 --> 00:08:24,150 That variable right there is what this is going to be equal to inside the drive function. 130 00:08:24,170 --> 00:08:27,720 So when I put the parentheses we see putt putt putt. 131 00:08:28,040 --> 00:08:33,310 So it essentially is same as putting truck sound right there as opposed to this. 132 00:08:33,410 --> 00:08:37,430 We just take that variable shove it in for the value of this and that's it. 133 00:08:37,430 --> 00:08:38,630 That's the rule. 134 00:08:39,050 --> 00:08:39,310 OK. 135 00:08:39,320 --> 00:08:46,620 So now that we understand the rule let's really apply it to what is going on inside of our case with 136 00:08:46,620 --> 00:08:52,860 the search bar and the form and the on Submit or enforcement call back right here. 137 00:08:53,280 --> 00:08:53,620 OK. 138 00:08:53,640 --> 00:08:55,770 I want to show you a little corner case here with this example. 139 00:08:55,770 --> 00:09:04,640 Here's a corner case what happens if I assign the drive function to a variable called Drive like so 140 00:09:04,660 --> 00:09:09,280 notice that I did not invoke drive there's no parentheses there I said card drive and I'm going to assign 141 00:09:09,280 --> 00:09:12,620 that function to a function or to a variable called Drive. 142 00:09:12,620 --> 00:09:17,320 Now down here I'm going to call the drive function but before I do before I put the parentheses on there 143 00:09:17,350 --> 00:09:19,980 I want you to guess what is going to be returned. 144 00:09:20,290 --> 00:09:25,690 Well applying that same rule that we just discussed to this function right here what is till after the 145 00:09:25,690 --> 00:09:26,740 dot. 146 00:09:26,740 --> 00:09:31,370 In this case there is no dot there's no time and there's nothing left to it. 147 00:09:31,390 --> 00:09:38,140 You might even say that to the left of the dot that doesn't exist here is the undefined or it's undefined 148 00:09:38,140 --> 00:09:39,000 to the left of the dot. 149 00:09:39,010 --> 00:09:40,270 In this case. 150 00:09:40,420 --> 00:09:43,960 So when I call this drive function now what do I get I get. 151 00:09:43,960 --> 00:09:44,390 Truck. 152 00:09:44,400 --> 00:09:44,810 OK. 153 00:09:45,040 --> 00:09:49,800 Let's reverse the code back to was before I get cannot read property. 154 00:09:49,810 --> 00:09:51,850 Sound of undefined. 155 00:09:51,850 --> 00:09:52,600 A quick question for you. 156 00:09:52,600 --> 00:09:54,860 Does that error message look familiar. 157 00:09:54,880 --> 00:09:56,010 Does it look familiar at all. 158 00:09:56,020 --> 00:09:57,510 I would say it looks pretty darn familiar. 159 00:09:57,520 --> 00:09:58,980 Yeah that looks very familiar. 160 00:09:59,260 --> 00:10:00,950 So what what does this tell you here. 161 00:10:00,970 --> 00:10:07,180 It tells you that when we pass that call back down into the form element at some point in time we are 162 00:10:07,240 --> 00:10:14,920 going to call our callback of on form submit right here and when it actually gets invoked there is no 163 00:10:15,010 --> 00:10:19,260 like this dot on forms submit there's no search bar on foreign submit. 164 00:10:19,300 --> 00:10:24,730 At some point in time when the form actually calls that function it rips that function off of that object 165 00:10:24,730 --> 00:10:30,430 or whatever object it shows up by us inside that form element and it calls that function on its own 166 00:10:30,520 --> 00:10:32,100 just like this. 167 00:10:32,110 --> 00:10:38,070 And so when the function is invoked the value of this inside event is equal to undefined. 168 00:10:38,080 --> 00:10:43,400 This example you see right here is exactly what is happening inside of our component right now. 169 00:10:44,660 --> 00:10:45,180 All right. 170 00:10:45,300 --> 00:10:50,940 Now at this point if this is confusing I encourage you to either rewash this video or ask a question 171 00:10:50,960 --> 00:10:57,610 and the keyway because like I said this error message right here you're going to see it a billion times 172 00:10:57,640 --> 00:10:59,580 even when I write real code these days. 173 00:10:59,580 --> 00:11:05,140 I've been writing code for a very long time and I still run into this problem surprisingly frequently. 174 00:11:05,140 --> 00:11:09,340 So if you have any questions right now please ask him cause he gotta understand this thing because I 175 00:11:09,370 --> 00:11:12,240 guarantee you you will run into this error message. 176 00:11:12,530 --> 00:11:12,800 OK. 177 00:11:12,820 --> 00:11:13,910 So let's take a pause here. 178 00:11:13,930 --> 00:11:17,760 When we come back the next section we're going to take this understanding about what's going on here 179 00:11:17,830 --> 00:11:22,810 and really truly apply it to our form Elman right here and kind of close the entire circle and make 180 00:11:22,810 --> 00:11:24,150 sure that things are really clear. 181 00:11:24,210 --> 00:11:24,610 OK. 182 00:11:24,760 --> 00:11:26,930 So quick pause and I'll see you in just a minute.