1 00:00:00,980 --> 00:00:02,210 Here is our problem statement. 2 00:00:02,240 --> 00:00:03,470 Here's what we are trying to do. 3 00:00:03,740 --> 00:00:07,880 If we open up the dropdown and then click outside of it, we want to close the dropdown. 4 00:00:08,420 --> 00:00:09,500 Sounds simple, right? 5 00:00:09,890 --> 00:00:13,340 Well, like I said at the end of the last video, more challenging than you would think. 6 00:00:14,000 --> 00:00:18,710 Now, the next coming videos are going to entirely focus on just understanding how we can close this 7 00:00:18,710 --> 00:00:19,190 dropdown down. 8 00:00:19,430 --> 00:00:24,020 It sounds like a very simple problem, but we're going to have to understand several different concepts, 9 00:00:24,080 --> 00:00:28,850 both in the world of the DOM H.T. mail and react to actually implement this. 10 00:00:29,300 --> 00:00:31,790 I can go into a lot of detail on these different concepts. 11 00:00:31,850 --> 00:00:35,600 And the reason for that is that even though we are applying them to a very simple dropdown widget, 12 00:00:35,840 --> 00:00:40,160 it turns out that these different concepts are going to come back up in a variety of other different 13 00:00:40,160 --> 00:00:40,500 widgets. 14 00:00:40,570 --> 00:00:42,590 You're gonna build throughout your web development career. 15 00:00:43,010 --> 00:00:45,320 So, again, we're gonna spend a decent bit of time here. 16 00:00:45,350 --> 00:00:49,100 It is because you really need to understand these different concepts. 17 00:00:50,030 --> 00:00:50,240 All right. 18 00:00:50,300 --> 00:00:52,310 So first off, why is this challenging? 19 00:00:52,370 --> 00:00:54,650 That's just the only thing I want to tackle inside this video. 20 00:00:56,430 --> 00:01:00,470 Inside this diagram, I've got kind of a rough sketch out of our HMO structure. 21 00:01:00,660 --> 00:01:02,700 More or less inside of application right now. 22 00:01:03,510 --> 00:01:05,670 So we've got some body elements at the very top. 23 00:01:06,380 --> 00:01:08,940 We've then maybe got some div right here in inside there. 24 00:01:09,000 --> 00:01:10,710 Maybe we are showing the dropdown component. 25 00:01:11,410 --> 00:01:15,580 Now, the dropdown component itself doesn't actually get inserted into the Dom Persay. 26 00:01:15,720 --> 00:01:18,870 In other words, there's not an element inside the dome called dropdown. 27 00:01:19,230 --> 00:01:24,120 I only put this little block inside of here to indicate that everything underneath this represents elements 28 00:01:24,120 --> 00:01:25,520 created by the dropdown components. 29 00:01:26,130 --> 00:01:29,040 I'm also not showing every element that the dropdown is creating. 30 00:01:29,430 --> 00:01:37,410 The dropdown in total is making UI form a div with field a label a div with UI selection dropdown and 31 00:01:37,470 --> 00:01:38,880 the list of options, et cetera. 32 00:01:39,030 --> 00:01:41,820 So I've just abbreviated the list of elements I'm showing here. 33 00:01:43,330 --> 00:01:46,990 Also, for the purposes of this diagram, I'm going to assume that we are also showing the accordion 34 00:01:46,990 --> 00:01:49,390 component on the screen, even though we are not right now. 35 00:01:50,350 --> 00:01:51,640 Now we understand these blocks. 36 00:01:51,700 --> 00:01:52,570 What's it all about? 37 00:01:53,200 --> 00:01:56,770 Well, with our dropdown component, we have, of course, a react component. 38 00:01:57,100 --> 00:01:58,330 Whenever we create a react component. 39 00:01:58,360 --> 00:02:04,390 We return some J.S. X, that J.S. X that we return, create some number of elements on the screen. 40 00:02:04,540 --> 00:02:10,870 And we can also optionally setup event handlers by providing some props to those elements. 41 00:02:11,410 --> 00:02:12,910 We have learned this throughout this course. 42 00:02:13,120 --> 00:02:17,500 We've learned many times that we could set up event handlers like on Klick. 43 00:02:18,090 --> 00:02:21,490 And whenever we click on that element, we're going to run that function. 44 00:02:22,400 --> 00:02:27,430 And the key thing to keep in mind here is that the drop down component can only use that syntax. 45 00:02:27,490 --> 00:02:33,760 In other words, this kind of style right here to set up event handlers on elements that it creates. 46 00:02:34,330 --> 00:02:39,280 The dropdown can only watch for clicks easily on these elements. 47 00:02:41,020 --> 00:02:47,080 The dropdown, on the other hand, can not easily listen to click events or any kind of event on any 48 00:02:47,080 --> 00:02:50,350 component or any element that is not created by the dropdown. 49 00:02:51,130 --> 00:02:56,590 The dropdown can not easily set up a click event handler on, say, the body or some element that is 50 00:02:56,590 --> 00:02:57,190 created by the. 51 00:02:57,730 --> 00:03:01,120 The accordion or some other div that might exist inside of our app. 52 00:03:02,000 --> 00:03:04,270 Lets just topic number one that we need to understand. 53 00:03:05,140 --> 00:03:06,130 We are trying right now. 54 00:03:07,310 --> 00:03:13,490 To click on some element on the screen that is not created by the dropdown and the dropdown just has 55 00:03:13,520 --> 00:03:19,580 a hard time to receive or listen to any events that are triggered by clicking anywhere else on the screen. 56 00:03:20,060 --> 00:03:22,250 And ironically, that's exactly what we want to do. 57 00:03:22,250 --> 00:03:26,660 We want to listen to click events being issued to something outside of the dropdown. 58 00:03:27,870 --> 00:03:32,760 OK, so that is the whole reason that this is challenging, because the built in event system that we 59 00:03:32,760 --> 00:03:38,640 have with react, this entire feature of adding on click event handlers to particular elements only 60 00:03:38,670 --> 00:03:44,160 allows a component to listen to clicks on elements that are created by that component. 61 00:03:45,000 --> 00:03:49,980 Now that we understand the challenge here, we're gonna take a quick pause and go through a quick series 62 00:03:49,980 --> 00:03:50,580 of videos. 63 00:03:50,670 --> 00:03:55,350 And in each these videos, I'm going to give you a different topic that we need to understand who eventually 64 00:03:55,350 --> 00:03:57,930 implement a solution for closing this dropdown.