1 00:00:01,170 --> 00:00:05,340 In the last section and we started setting up our project by adding the search bar to the top of the 2 00:00:05,340 --> 00:00:12,020 page we just have a simple form right now an input and a span that wraps a button. 3 00:00:12,380 --> 00:00:17,060 And again the class names and kind of the team structure that we have here is coming from bootstraps 4 00:00:17,060 --> 00:00:22,080 So again if you're curious about that at all you can go check out this draft documentation. 5 00:00:22,080 --> 00:00:23,900 So we've got our input now. 6 00:00:24,000 --> 00:00:27,450 We're now going to turn it into a controlled field. 7 00:00:27,450 --> 00:00:33,630 Remember a controlled field is a form element where the value of the input is set by the state of our 8 00:00:33,630 --> 00:00:35,550 component not the other way around. 9 00:00:35,820 --> 00:00:41,160 So you know when someone clicks on the button right here we're not going to say oh you know hey what's 10 00:00:41,160 --> 00:00:42,600 currently in the input right now. 11 00:00:42,600 --> 00:00:46,100 We're going to say you know this state DOT blah blah blah. 12 00:00:46,290 --> 00:00:50,950 We're going to say declaratively what the value of our input is not imperatively. 13 00:00:51,450 --> 00:00:57,630 So to create a controlled component we need to set our state whenever the input is changed. 14 00:00:57,720 --> 00:01:03,120 And don't forget that when I refer to state in here I'm referring to our component state just the component 15 00:01:03,120 --> 00:01:05,160 level not the redux level state. 16 00:01:05,160 --> 00:01:08,250 Two completely separate things. 17 00:01:08,250 --> 00:01:14,260 So if you recall to set our state up we need to initialize it inside of our constructor. 18 00:01:14,430 --> 00:01:17,510 So all right constructor profs. 19 00:01:18,090 --> 00:01:28,890 And then we'll call super with props and then we initialize our state with this state equals term which 20 00:01:28,890 --> 00:01:31,180 will be an empty string. 21 00:01:31,590 --> 00:01:37,160 So we're going to say that the value of the input is going to be mapped to this state. 22 00:01:37,260 --> 00:01:42,750 Term term being search short for like you know a search term and we're also going to default to just 23 00:01:42,750 --> 00:01:47,020 be an empty string so that when the input first shows up it's going to be completely empty. 24 00:01:47,040 --> 00:01:51,180 You know no content in there to start off with. 25 00:01:51,180 --> 00:01:58,380 So now we have some initial state here we can go ahead and update the state over time using a change 26 00:01:58,380 --> 00:02:01,200 handler on the input. 27 00:02:01,200 --> 00:02:06,510 We're also going to add some other tags in here at the same time as we do this event handler. 28 00:02:06,780 --> 00:02:08,890 So let's go ahead and get to it. 29 00:02:09,360 --> 00:02:14,550 So first we're going to add a placeholder on here just the user knows you know what the heck this thing 30 00:02:14,550 --> 00:02:17,060 is for what they're doing as is input. 31 00:02:17,130 --> 00:02:24,850 So the placeholder will be get a five day forecast in your favorite cities. 32 00:02:25,470 --> 00:02:35,550 Let's go with the period yeah let's go in and then we'll give it a class name of form dash control and 33 00:02:35,550 --> 00:02:41,070 then so here's the next two properties of the parts that actually turn it into a controlled component 34 00:02:41,700 --> 00:02:45,950 first will assign the value to it which will be this start state term. 35 00:02:45,960 --> 00:02:53,430 So remember the inputs value is coming from this dot state DOT term and we'll say hey whenever someone 36 00:02:53,430 --> 00:02:54,500 changes this thing. 37 00:02:54,600 --> 00:02:58,010 So on Change run the function. 38 00:02:58,110 --> 00:03:05,140 This dot on input change like so. 39 00:03:06,930 --> 00:03:09,420 So we don't have this function right here defined yet. 40 00:03:09,420 --> 00:03:12,600 Right we don't have anything in this component that says hey on input change. 41 00:03:12,600 --> 00:03:19,680 So we need to go ahead and define that change handler we'll define it as a new function on our class 42 00:03:20,310 --> 00:03:29,150 on input change and its first argument and here is going to be an event object. 43 00:03:29,330 --> 00:03:37,290 Remember all Dom event handlers like on change or on click or on hover or you know on scroll What have 44 00:03:37,290 --> 00:03:37,860 you. 45 00:03:37,860 --> 00:03:40,350 They all come along with this event object right here. 46 00:03:40,350 --> 00:03:41,610 And this is a reactor thing. 47 00:03:41,610 --> 00:03:44,310 This is a you know all vanilla javascript thing. 48 00:03:44,320 --> 00:03:46,720 We get to see that object here. 49 00:03:47,550 --> 00:03:53,150 Let's go ahead and use that event object to just console log the value of the input. 50 00:03:53,190 --> 00:04:00,340 Whenever someone types in there it's all right console log we then target that value. 51 00:04:00,360 --> 00:04:05,570 And again you know this target of value is not a react thing it's just vanilla javascript vanilla aged 52 00:04:05,610 --> 00:04:06,970 you know. 53 00:04:07,810 --> 00:04:08,110 OK. 54 00:04:08,130 --> 00:04:12,670 So I want to save this and just to make sure that we've got everything wired up correctly in here. 55 00:04:12,690 --> 00:04:17,490 You know our change handler makes sure that we've got the value coming in correctly. 56 00:04:17,490 --> 00:04:23,760 I'm going to go ahead and test it out in the browser so I'm going to refresh and you'll notice that 57 00:04:23,760 --> 00:04:27,980 that class name that we added on here now makes it look pretty darn nice. 58 00:04:28,070 --> 00:04:30,320 You know it connects up nicely with a submit button. 59 00:04:30,570 --> 00:04:33,500 And we've also got our placeholder text in here as well. 60 00:04:33,560 --> 00:04:36,440 Get the five day forecast in your favorite cities. 61 00:04:36,510 --> 00:04:39,600 I guess I'm going to type something in here before I type something. 62 00:04:39,630 --> 00:04:43,740 I want you to kind of imagine in your head you know what happens when I type. 63 00:04:43,740 --> 00:04:46,630 Thinking back to when we previously set up a controlled component. 64 00:04:46,650 --> 00:04:47,890 Right. 65 00:04:47,910 --> 00:04:54,300 When we don't have something to update this start state DOT term the value of the input never actually 66 00:04:54,300 --> 00:04:55,310 gets displayed. 67 00:04:55,500 --> 00:04:58,580 So the value when we type in here is going to stay blank. 68 00:04:58,590 --> 00:05:02,600 It's going to stay totally empty which is I know totally mind boggling how that could happen. 69 00:05:02,610 --> 00:05:04,860 But just one of those things. 70 00:05:05,010 --> 00:05:05,270 OK. 71 00:05:05,280 --> 00:05:08,930 So I mean here let's start typing and we got our text. 72 00:05:08,970 --> 00:05:11,040 Everyone's happy. 73 00:05:11,400 --> 00:05:14,330 The value of the input comes from this dot state term. 74 00:05:14,340 --> 00:05:15,790 We're not updating that value. 75 00:05:15,810 --> 00:05:21,450 So it never appears that the text in here actually changes but the keypresses do occur so we do see 76 00:05:21,450 --> 00:05:23,220 the console log. 77 00:05:24,180 --> 00:05:31,350 So let's fix that problem by going ahead and setting our state whenever we enter some text in there 78 00:05:31,370 --> 00:05:31,660 . 79 00:05:31,980 --> 00:05:36,310 So we'll say this does set state term. 80 00:05:36,870 --> 00:05:44,570 That's our you know term for holding the current search term is going to be given target value. 81 00:05:44,940 --> 00:05:45,520 Okay. 82 00:05:45,860 --> 00:05:51,270 So I mean to say this now will refresh and let's try typing again. 83 00:05:51,270 --> 00:05:58,810 And oh my goodness we've got a big ole air here cannot read properties set state of undefined. 84 00:05:58,830 --> 00:05:59,870 All right so what's happening here. 85 00:05:59,900 --> 00:06:01,990 And we never into this for right. 86 00:06:02,010 --> 00:06:10,530 Whenever we have set up a you know input like this in the past well when we last used an event handler 87 00:06:10,590 --> 00:06:16,710 handler like this we wrapped the event handler inside of a fat arrow function. 88 00:06:16,710 --> 00:06:23,080 This time around we're just saying hey whenever onchange is called Run this start on input change. 89 00:06:23,100 --> 00:06:26,960 We're just doing it dysfunctionally just saying hey we're you change never something happens you're 90 00:06:26,970 --> 00:06:27,820 just run this function. 91 00:06:27,840 --> 00:06:29,100 OK. 92 00:06:29,790 --> 00:06:38,250 The problem is that when we pass off any event handler like this and then call it the value of this 93 00:06:38,640 --> 00:06:43,780 is not going to be our search component our search bar here is not going to be the re-asked components 94 00:06:43,800 --> 00:06:46,190 going to be some mystery context. 95 00:06:46,350 --> 00:06:51,700 If you're not really familiar with the concept of this in javascript no problem whatsoever. 96 00:06:51,870 --> 00:06:58,950 All you need to know is that whenever we hand a callback function like this off and then the callback 97 00:06:58,950 --> 00:07:01,010 reference is this. 98 00:07:01,290 --> 00:07:07,140 This is going to have the in incorrect context it's going to have some mystery context. 99 00:07:07,140 --> 00:07:14,220 So when we hand this off and then we type in the input and this runs we get the error message that says 100 00:07:15,000 --> 00:07:21,270 hey you know this Scott said state I don't have set state that you know the method set stayed on here 101 00:07:21,570 --> 00:07:24,690 because this is not the actual component here. 102 00:07:25,380 --> 00:07:31,170 So to fix this we're going to use a different approach than what we had previously where we use the 103 00:07:31,170 --> 00:07:32,120 arrow function. 104 00:07:32,120 --> 00:07:38,210 You know like this which we had previously we're going to take a different approach this time around 105 00:07:38,670 --> 00:07:43,680 and we're going to find the context of on input change. 106 00:07:43,680 --> 00:07:46,620 So we do that by writing in our constructor. 107 00:07:46,620 --> 00:07:53,070 This dot on input change equals this dot on input. 108 00:07:53,070 --> 00:07:58,000 Change bind this. 109 00:07:59,160 --> 00:08:03,750 So before we you know explain or walk through what's happening here let's give a shot in the browser 110 00:08:03,750 --> 00:08:03,990 now. 111 00:08:04,010 --> 00:08:13,410 So I can see this will refresh and then we'll type and you'll say see that we get our input up incorrectly 112 00:08:13,410 --> 00:08:16,100 we got the crack in the log and no errors in here. 113 00:08:16,140 --> 00:08:16,470 All right. 114 00:08:16,470 --> 00:08:20,860 So looks like it's working now but you know why is it working right. 115 00:08:21,730 --> 00:08:30,090 So this line right here says this which is our instance of search bar has a function called on input 116 00:08:30,090 --> 00:08:41,730 change bind that function to this which is search bar and then replace on input change with this new 117 00:08:41,940 --> 00:08:44,160 bound instance of this function. 118 00:08:44,160 --> 00:08:50,400 So that's what's happened here it's saying take the existing function find it to this and then replace 119 00:08:50,400 --> 00:08:51,780 the existing function with it. 120 00:08:51,780 --> 00:08:55,550 So we're kind of like overwriting this local method on here. 121 00:08:56,820 --> 00:08:57,390 OK. 122 00:08:57,570 --> 00:09:03,840 So again if you're not really familiar with the concept of this and javascript no problem whatsoever 123 00:09:04,140 --> 00:09:08,110 just remember rule of thumb that works probably 99 percent of the time. 124 00:09:08,280 --> 00:09:14,400 If you're ever passing a callback around as a function like this and that callback has a reference to 125 00:09:14,400 --> 00:09:18,030 this you need to bind with the context. 126 00:09:18,030 --> 00:09:22,650 Luckily the error messages that you usually get from doing this incorrectly are tend to be pretty darn 127 00:09:22,650 --> 00:09:23,110 clear. 128 00:09:23,110 --> 00:09:28,280 You know in our case it said hey I don't know what sets it what the function set state is. 129 00:09:28,470 --> 00:09:31,820 Well our component only has one reference to set state. 130 00:09:31,830 --> 00:09:34,410 So this would have been a really easy bug to track down right. 131 00:09:34,410 --> 00:09:40,260 We would have said oh you know this song said state that should be defined but oh me they forgot to 132 00:09:40,260 --> 00:09:41,610 bind my context. 133 00:09:41,790 --> 00:09:45,660 So if you ever run across that air where you say say an error message or it's like I don't know what 134 00:09:45,660 --> 00:09:46,800 that function is. 135 00:09:46,830 --> 00:09:51,100 Start thinking about context especially if it's in a callback like so. 136 00:09:51,630 --> 00:09:54,010 All right so now that our callback here works properly. 137 00:09:54,030 --> 00:09:56,430 Let's go ahead and continue in the next section.