1 00:00:00,700 --> 00:00:04,430 In the last section we spoke about how we're going to communicate information from the search bar to 2 00:00:04,430 --> 00:00:05,020 the app. 3 00:00:05,060 --> 00:00:11,950 So step one is to refactor our app into a class based component to open up my apps J.S. file and I'll 4 00:00:11,960 --> 00:00:16,430 go through the same process that we've already learned for refactoring a functional component over to 5 00:00:16,490 --> 00:00:17,720 a class 1. 6 00:00:17,810 --> 00:00:24,200 So I'm going to find the app declaration right here and I will replace it with class app extends re-act 7 00:00:24,320 --> 00:00:28,620 dot component. 8 00:00:28,660 --> 00:00:34,610 Then inside there are defined by render function and I'll put a curly brace on the other side of it 9 00:00:35,490 --> 00:00:36,770 like so. 10 00:00:36,770 --> 00:00:43,770 Then finally I'll make sure that I remove the semi-colon on the very end of the class ok cell X good. 11 00:00:44,210 --> 00:00:50,030 So now we can define a callback function on the app I think we'll give it the same name that you saw 12 00:00:50,030 --> 00:00:50,750 over here. 13 00:00:50,750 --> 00:00:52,560 We called it on search submit. 14 00:00:52,730 --> 00:00:56,110 It's all defined in method on search submits. 15 00:00:56,330 --> 00:01:00,560 Are going to say that this thing gets called with our search term which all abbreviates simply adds 16 00:01:00,560 --> 00:01:01,480 term. 17 00:01:01,490 --> 00:01:05,450 So right now let's just cancel that term and make sure that it shows up inside the app. 18 00:01:06,340 --> 00:01:10,840 Now we can take this method and pass it down into the search bar as a prop. 19 00:01:11,020 --> 00:01:17,270 So I'll say on submit Hassen on search submit. 20 00:01:17,370 --> 00:01:24,180 Now notice the name that I use here I said on submit on our form element back inside of search bar here 21 00:01:24,180 --> 00:01:27,460 is the search bar on the form element and the input right here. 22 00:01:27,520 --> 00:01:33,760 We have to call these props are these things that function as callbacks on summits or onchange with 23 00:01:34,000 --> 00:01:35,700 these normal GSX elements. 24 00:01:35,710 --> 00:01:38,800 We have to use these very specific names. 25 00:01:38,800 --> 00:01:44,500 But when you pass in properties or callbacks to components that you and I author we can call them anything 26 00:01:44,500 --> 00:01:45,370 that we want. 27 00:01:45,370 --> 00:01:47,080 So I decided on submit. 28 00:01:47,080 --> 00:01:55,830 I could have just as easily called this something like Ron me when user submits or something like that 29 00:01:55,830 --> 00:02:00,510 we can call it anything we want but in general I just kind of thought on Samit kind of makes sense. 30 00:02:00,540 --> 00:02:04,190 I want to run this function and each time that the search bar is submitted. 31 00:02:04,260 --> 00:02:06,130 So on Samit run this function. 32 00:02:06,210 --> 00:02:10,350 To me it kind of makes sense but if you think that there is some other name here that would make more 33 00:02:10,350 --> 00:02:10,800 sense. 34 00:02:10,890 --> 00:02:12,200 Feel free to go for it. 35 00:02:12,240 --> 00:02:17,960 Just remember you can't do that same thing when ever you are passing a prop in a callback to eight in 36 00:02:17,980 --> 00:02:20,740 normal GSX element. 37 00:02:20,790 --> 00:02:26,550 All right so now inside on form submit rather than cancel logging out our term we instead want to call 38 00:02:27,750 --> 00:02:32,110 on search submit was which was passed in as a prop to this component. 39 00:02:32,400 --> 00:02:38,360 Now remember any time we pass a prop down into a component that we are creating we refer to that prop 40 00:02:38,520 --> 00:02:40,020 with this name. 41 00:02:40,050 --> 00:02:47,000 So inside of this search bar to reference that prop we would say props start on submit. 42 00:02:47,010 --> 00:02:48,350 That is the reference to the function. 43 00:02:48,390 --> 00:02:50,890 They got passed in a peer. 44 00:02:50,950 --> 00:02:55,670 Now just one little issue here every time that we have made use of props so far throughout this course 45 00:02:55,720 --> 00:02:58,400 it's always been a functional component. 46 00:02:58,420 --> 00:03:02,710 This is the first time that we are making use of props inside of a class based component. 47 00:03:02,710 --> 00:03:07,740 One little difference between the two when we are in a class based component we reference the props 48 00:03:07,740 --> 00:03:10,480 object with this props. 49 00:03:10,630 --> 00:03:10,950 That's it. 50 00:03:10,960 --> 00:03:13,050 That's the only difference. 51 00:03:13,070 --> 00:03:18,290 So to get access to the callback that was passed from the app down to our search bar we would reference 52 00:03:18,350 --> 00:03:27,410 this props on Samit then I'll make sure I call that and when I call it I'll pass in this state term 53 00:03:27,500 --> 00:03:29,960 like so. 54 00:03:29,980 --> 00:03:30,310 All right. 55 00:03:30,340 --> 00:03:30,860 That's it. 56 00:03:30,880 --> 00:03:33,260 I think we're now ready to test this as a quick reminder. 57 00:03:33,270 --> 00:03:34,850 Just one quick run through here. 58 00:03:34,900 --> 00:03:41,870 So we're now saying that whenever a user submits the form we are going to run on forms submit yours 59 00:03:41,890 --> 00:03:44,410 on form submit we take the event. 60 00:03:44,510 --> 00:03:48,770 We prevent the default behavior that would cause the page to refresh itself and then we look at our 61 00:03:48,770 --> 00:03:54,890 Propp subject and we called a function that was passed into this thing as the on submit product and 62 00:03:54,890 --> 00:04:03,460 we invoke that function with this state term here is that function we passed in on search submit to 63 00:04:03,460 --> 00:04:04,700 the on Samit Propp. 64 00:04:04,870 --> 00:04:09,040 So this is the function that ultimately is going to be invoked and for right now we're just going to 65 00:04:09,040 --> 00:04:10,450 counsel luck. 66 00:04:10,450 --> 00:04:10,660 All right. 67 00:04:10,660 --> 00:04:15,810 So I'm going to flip back over I'll put in some text here and then hit enter. 68 00:04:15,990 --> 00:04:18,390 And yet we see some term that right there. 69 00:04:18,450 --> 00:04:22,770 You'll notice that it was counsel from the GSA file on line 6. 70 00:04:22,890 --> 00:04:26,680 So here is line 6 right here inside of the abdicates file. 71 00:04:26,720 --> 00:04:27,540 So that's pretty much it. 72 00:04:27,540 --> 00:04:32,940 So now inside of here we can write some code to go ahead and take the search term and actually make 73 00:04:32,940 --> 00:04:35,020 a request to get a list of images. 74 00:04:35,190 --> 00:04:36,460 So let's take a quick pause right here. 75 00:04:36,480 --> 00:04:41,300 When we come back the next section we're going to start talking about data loading inside of our application.