1 00:00:00,640 --> 00:00:05,880 In the last video we discussed how we're going to get some Click event on the video item to make a change 2 00:00:05,880 --> 00:00:07,650 to the state of our app component. 3 00:00:07,650 --> 00:00:12,360 Remember we're just going to pass a function call back to the video list and then down to the video 4 00:00:12,360 --> 00:00:12,920 item. 5 00:00:12,930 --> 00:00:14,340 So let's get to it. 6 00:00:14,730 --> 00:00:17,650 I'm going to flip back over to my apt G-S file. 7 00:00:17,730 --> 00:00:22,380 Now inside of it the first thing I'm going to do is add on a new property to my state object called 8 00:00:22,650 --> 00:00:29,180 selected video and I will default that to be the value null. 9 00:00:29,330 --> 00:00:37,450 Then after that underneath on terms submit I'm going to add in and you call back I will call on video 10 00:00:37,540 --> 00:00:40,880 select since this is going to be a callback. 11 00:00:40,880 --> 00:00:44,800 I'm going to define it as an arrow function as we have many other times. 12 00:00:44,960 --> 00:00:47,490 This is going to be called with some video object. 13 00:00:47,510 --> 00:00:52,130 Remember this video object right here is the object that we fetch from that YouTube API. 14 00:00:52,610 --> 00:00:57,500 So for now I'm just going to console log that thing out like so and in from the console log let's put 15 00:00:57,500 --> 00:01:02,520 a little string note here that says like from the the app. 16 00:01:02,790 --> 00:01:03,920 Now put a comma and then. 17 00:01:03,980 --> 00:01:05,020 And then the video. 18 00:01:05,090 --> 00:01:08,630 So whenever we see a console log we'll know it's coming from the app component. 19 00:01:09,460 --> 00:01:14,180 So now I'm going to make sure that I pass a reference to this callback right here down to the video 20 00:01:14,180 --> 00:01:22,650 list as a prop so to say on video select equals this start on video. 21 00:01:22,650 --> 00:01:29,580 Select Now remember as I mentioned just a little bit ago with the on search bar called back right there 22 00:01:29,670 --> 00:01:33,530 the name of the prop and the name of the function do not have to be identical. 23 00:01:33,690 --> 00:01:38,310 When we discussed this on form Smit an on terms Smit I had told you that I personally like to use the 24 00:01:38,310 --> 00:01:42,720 same terminology on both sides of the thing but the callback and the prompt that's going down. 25 00:01:43,140 --> 00:01:48,010 So this is a instance of where I'm doing my personal preferred way of handling this. 26 00:01:48,480 --> 00:01:48,710 OK. 27 00:01:48,720 --> 00:01:53,290 So now the video lists are going to open up that file. 28 00:01:53,340 --> 00:01:54,990 Here's the video list. 29 00:01:54,990 --> 00:01:57,570 I'm going to reference the prop's object up here. 30 00:01:57,570 --> 00:02:01,080 Remember we are currently destructuring out the videos property. 31 00:02:01,200 --> 00:02:05,560 I'm going to also do structure out on video select. 32 00:02:05,730 --> 00:02:10,130 So that's a callback that we just passed from the app down to the video list. 33 00:02:10,440 --> 00:02:15,240 And now we'll take that call back and we're going to make sure that we pass it down in turn into the 34 00:02:15,240 --> 00:02:16,840 video item. 35 00:02:16,860 --> 00:02:24,120 So on the video item I'll add in a new prop called on video select and I'll pass it on video select 36 00:02:26,110 --> 00:02:27,340 now and I saved this file. 37 00:02:27,340 --> 00:02:28,620 You'll probably see my code jump. 38 00:02:28,660 --> 00:02:30,130 Just a quick reformatting step. 39 00:02:30,190 --> 00:02:30,510 OK. 40 00:02:30,520 --> 00:02:32,740 Guess not so in this case. 41 00:02:32,740 --> 00:02:36,640 So now finally we can open up our video item. 42 00:02:36,860 --> 00:02:38,730 So here's the video item again. 43 00:02:38,750 --> 00:02:44,790 I'm going to structure out that prop that we just passed down here called on video select. 44 00:02:44,840 --> 00:02:50,060 Now I'm going to add on a callback or meet an event handler to the div right here I'm going to say that 45 00:02:50,060 --> 00:02:58,580 whenever someone clicks this thing so on click I want to call on video select with this very particular 46 00:02:58,580 --> 00:02:59,530 video right here. 47 00:02:59,540 --> 00:03:04,940 Remember we don't want to just invoke on video select We want to call it with the video that was passed 48 00:03:04,940 --> 00:03:08,160 to this very particular video item component. 49 00:03:08,420 --> 00:03:14,110 So I'm going to put a arrow function in here because I want to call on video select with some arguments. 50 00:03:14,240 --> 00:03:19,700 If I just put in on video select like so the function will be called but it will not be called with 51 00:03:19,700 --> 00:03:20,380 the video. 52 00:03:20,540 --> 00:03:25,490 So an easy way to make sure that when we call this thing it passes in the appropriate video it's to 53 00:03:25,640 --> 00:03:31,240 put an air of function in here and then call on video select and then pass in the video like so 54 00:03:34,770 --> 00:03:35,000 OK. 55 00:03:35,010 --> 00:03:39,810 So I'm now going to make sure that I've saved all three files and they'll test this out inside the browser. 56 00:03:39,900 --> 00:03:44,310 And for right now our goal is to make sure that inside the app component we see the console log from 57 00:03:44,310 --> 00:03:47,070 the original on video select callback method. 58 00:03:48,580 --> 00:03:50,180 All right so I'll flip back over. 59 00:03:50,230 --> 00:03:52,050 I'll search for buildings. 60 00:03:52,390 --> 00:03:55,650 I'm going to make sure that I open up my council. 61 00:03:55,730 --> 00:03:57,200 We still have the key working right here. 62 00:03:57,200 --> 00:03:59,080 Don't worry we'll take care of that in just a moment. 63 00:04:00,470 --> 00:04:04,640 And now if I click on the list I'll see from the OP and then that video object. 64 00:04:04,640 --> 00:04:08,930 So inside the video object is the snippet with all the details about this video that we care about. 65 00:04:08,930 --> 00:04:14,420 So the title the thumbnails the id property all that good stuff. 66 00:04:14,550 --> 00:04:18,320 And if I click on some other video I'll see information about that one. 67 00:04:18,560 --> 00:04:23,670 So here now the snippet I see the title of best building demolition compilation. 68 00:04:23,790 --> 00:04:25,190 Yep that's that video right there. 69 00:04:25,190 --> 00:04:27,060 Now we can try the last one really quick. 70 00:04:27,080 --> 00:04:30,080 I click on that one and expand the snippet I can check my title. 71 00:04:30,080 --> 00:04:33,590 And now I see how tall buildings take the wind. 72 00:04:33,590 --> 00:04:34,270 There you go. 73 00:04:35,270 --> 00:04:40,130 All right so very quickly let's do a review of what just happened because this is kind of a confusing 74 00:04:40,130 --> 00:04:43,130 technique if you are seeing it for the very first time. 75 00:04:43,130 --> 00:04:49,390 So inside of our app component we defined a new callback method called on video select. 76 00:04:49,520 --> 00:04:53,680 We then passed that as a prop down to the video list the video list. 77 00:04:53,720 --> 00:04:56,870 In turn pass that down to the video item. 78 00:04:57,080 --> 00:05:03,800 Then whenever a user clicked on a video item we invoked that callback which essentially sent some communication 79 00:05:03,940 --> 00:05:06,100 back up to the app component. 80 00:05:06,140 --> 00:05:11,150 Remember when we are communicating from a parent down to a child we can do that very easily with the 81 00:05:11,150 --> 00:05:18,590 props system but anytime that we want to communicate from a child's back up to some parent component 82 00:05:18,920 --> 00:05:22,990 we usually make use of a callback which is exactly what we did in this video. 83 00:05:23,150 --> 00:05:28,640 So this little connection string right here that was done through a callback function rather than directly 84 00:05:28,640 --> 00:05:30,510 the props system. 85 00:05:30,510 --> 00:05:30,750 All right. 86 00:05:30,750 --> 00:05:31,990 So this looks pretty good. 87 00:05:32,310 --> 00:05:38,520 So now the very lesson we have to do is make sure that on video select right here takes that video and 88 00:05:38,520 --> 00:05:43,710 sets it on our state specifically on the selected video property. 89 00:05:43,710 --> 00:05:48,540 Once we update that property right there on our state object that's going to render the app and then 90 00:05:48,540 --> 00:05:53,610 we can create the video detail component and make sure that we pass the currently selected video to 91 00:05:53,610 --> 00:05:54,980 the video detail. 92 00:05:55,680 --> 00:05:59,030 All right let's take another pause right here and we'll start to take care of that in the next video.