1 00:00:00,860 --> 00:00:05,660 In the last video we made some pretty good progress on our search bar component at the very end. 2 00:00:05,670 --> 00:00:10,230 We wired up this onchange event handler that we had called on input change. 3 00:00:10,320 --> 00:00:15,540 So remember this callback method right here is going to be called with an event object and we're going 4 00:00:15,540 --> 00:00:21,810 to make sure that we take our value of the input out of that event object and assign it to a state property. 5 00:00:21,810 --> 00:00:23,310 So I'll call inside of here. 6 00:00:23,310 --> 00:00:32,330 This set states are going to update my term property with a value from event target value and then I'm 7 00:00:32,330 --> 00:00:36,890 also going to make sure that I remove that kind of default string that I initialized my states object 8 00:00:36,890 --> 00:00:41,480 with and return it to the default of empty string. 9 00:00:41,480 --> 00:00:45,330 So now we should be able to flip back over and successfully type inside there. 10 00:00:45,380 --> 00:00:46,080 Very good. 11 00:00:47,010 --> 00:00:51,390 Now you might recall that on the last application when put together we actually wrote this on input 12 00:00:51,390 --> 00:00:55,170 change event handler in line or as a inline function. 13 00:00:55,170 --> 00:01:01,290 When we passed it off to onchange recall that that is a completely equivalent way of defining the onchange 14 00:01:01,290 --> 00:01:01,870 handler. 15 00:01:01,980 --> 00:01:03,950 Same thing as what we just did right here. 16 00:01:04,200 --> 00:01:07,500 So if we wanted to we could have done something abbreviated like this. 17 00:01:07,560 --> 00:01:14,340 Set state's term target value like so the summary and I figured we would just do things a little bit 18 00:01:14,340 --> 00:01:16,060 differently just for the sake of fun. 19 00:01:17,380 --> 00:01:21,160 All right so now that we've got our input text here working just fine. 20 00:01:21,190 --> 00:01:25,510 We're going to make sure that we get a callback handler on our form as well so that we can watch for 21 00:01:25,510 --> 00:01:27,880 any time that this form gets submitted. 22 00:01:27,880 --> 00:01:35,710 So on the form element I'm going to add on a very specially named prop on submit any time that the user 23 00:01:35,710 --> 00:01:43,950 submits the form we're going to call a callback method of this start on form submit and then right underneath 24 00:01:43,950 --> 00:01:48,690 the existing event handler or out on a new method called on form. 25 00:01:48,870 --> 00:01:53,770 MIT and I'll write out the same syntax we had for the previous one. 26 00:01:53,770 --> 00:01:58,720 Remember I'm assigning this as an arrow function because this is a callback that I get a pass to some 27 00:01:58,780 --> 00:02:04,270 child element and remember that discussion we had a while ago a very long discussion around the value 28 00:02:04,270 --> 00:02:06,380 of this inside a callback. 29 00:02:06,850 --> 00:02:11,440 All right so now inside of here we're going to make sure that the browser does not attempt to automatically 30 00:02:11,440 --> 00:02:18,120 submit the form any time that the user actually submits it to prevent that we will call it event prevent 31 00:02:18,240 --> 00:02:26,580 default and then after that we're going to make sure eventually that we try to call some callback function 32 00:02:26,910 --> 00:02:29,650 cost into our search bar from the app component. 33 00:02:29,880 --> 00:02:31,090 We don't have that just yet. 34 00:02:31,110 --> 00:02:33,560 We're not passing any callback into the search bar. 35 00:02:33,660 --> 00:02:37,500 So I'm not going to add anything inside of enformed submit just yet. 36 00:02:37,740 --> 00:02:45,940 Instead right now I'll add in a little comment to myself I'll say to make sure we call call back from 37 00:02:46,240 --> 00:02:51,250 parent component so that we can tell the app that the user just omitted the form and that they probably 38 00:02:51,250 --> 00:02:54,780 want to attempt to initiate a new search of the YouTube API. 39 00:02:55,830 --> 00:02:58,170 All right so let's flip back over really quickly. 40 00:02:58,170 --> 00:03:03,480 I'm going to enter some text in here and if I hit enter I just expect to make sure that the page does 41 00:03:03,480 --> 00:03:09,750 not entirely refresh remember that's the entire purpose of the event prove that default line right there. 42 00:03:09,870 --> 00:03:15,840 If we don't have that line and we enter something in and hit Enter we will see the application refresh 43 00:03:15,900 --> 00:03:17,860 which is not desired behavior. 44 00:03:17,860 --> 00:03:21,290 So I to make sure I comment that OK. 45 00:03:21,540 --> 00:03:23,440 So I think that we've got the search bar put together. 46 00:03:23,460 --> 00:03:24,350 That was pretty quick. 47 00:03:24,390 --> 00:03:27,660 And trust me the rest of the application is going to be pretty quick too. 48 00:03:27,930 --> 00:03:29,020 Let's take a pause right here. 49 00:03:29,040 --> 00:03:33,690 When we come back the next section we're going to start to set up the YouTube API so that we can actually 50 00:03:33,690 --> 00:03:38,420 take that search term and make a request and get back a list of videos to show on the screen. 51 00:03:38,640 --> 00:03:40,660 So quick pause and I'll see you in just a minute.