1 00:00:02,020 --> 00:00:05,920 USRAP is probably the easiest to hook to use out of all the ones we're going to look at. 2 00:00:05,930 --> 00:00:13,630 So let's just get to it back inside of our ED at the very top, I will import USRAP and then right after 3 00:00:13,630 --> 00:00:18,580 we declare a piece of state, we'll say ref is use ref. 4 00:00:20,790 --> 00:00:26,070 We're then going to take that ref object and assign it to one of the elements inside or one of the elements. 5 00:00:26,100 --> 00:00:27,450 We are returning from this component. 6 00:00:28,170 --> 00:00:32,040 So in our case, we want to get a reference to the most apparent element that we are returning from 7 00:00:32,040 --> 00:00:32,640 our component. 8 00:00:33,120 --> 00:00:35,400 That is the div with the class name of uniform. 9 00:00:36,340 --> 00:00:40,540 With if we put in roof equals roof, and that's pretty much it. 10 00:00:41,530 --> 00:00:47,830 Now, after our component is rendered for the very first time, we can get a reference to that div by 11 00:00:47,950 --> 00:00:54,010 making use of refought current, it is specifically the current property on the roof that is going to 12 00:00:54,010 --> 00:00:55,540 give us a reference to that div. 13 00:00:56,550 --> 00:01:03,270 So as a quick example of that, let's put in a console log right above that return of refought current. 14 00:01:05,150 --> 00:01:09,660 And I'm going to say this, flip back over, you'll notice that the very first time our component is 15 00:01:09,660 --> 00:01:12,090 rendered, we get a slug of undefined. 16 00:01:12,540 --> 00:01:17,880 That is because we are logging the value of wrapped up current before we return. 17 00:01:17,880 --> 00:01:24,060 Any jousts before the ref has been bound to this div and before that div has even been created inside 18 00:01:24,060 --> 00:01:24,600 of our dome. 19 00:01:25,350 --> 00:01:31,320 However, after that, any time that we render our component current will refer to our top level div. 20 00:01:31,660 --> 00:01:36,840 So I'm going to clear my console and then I will cause a render by changing the status of my dropdown 21 00:01:36,840 --> 00:01:37,350 component. 22 00:01:37,650 --> 00:01:40,050 We can do that very easily by just opening the dropdown. 23 00:01:41,210 --> 00:01:46,540 Now, I left in the other log of the actual element that was looked on, so I'm going to go remove that 24 00:01:46,540 --> 00:01:51,130 or come into out very quickly the back up here at the document body event listener. 25 00:01:51,160 --> 00:01:53,770 We'll just delete that really quick and we'll try that again. 26 00:01:54,720 --> 00:01:56,970 It's going to open that thing and there we go. 27 00:01:57,270 --> 00:02:01,380 We now have a direct reference to that top level element inside of our component. 28 00:02:02,660 --> 00:02:05,300 Do we access that through refought current? 29 00:02:06,800 --> 00:02:12,200 OK, so we now know the element, the most apparent element inside of our component and we know the 30 00:02:12,200 --> 00:02:13,580 element was actually clicked on. 31 00:02:14,400 --> 00:02:16,310 So to be able to make the distinction. 32 00:02:17,620 --> 00:02:22,330 Between scenario number two and scenario number one and decide whether or not the body event listener 33 00:02:22,330 --> 00:02:24,550 should do anything, the last thing we have to do. 34 00:02:25,610 --> 00:02:26,840 And can remove that council log. 35 00:02:27,810 --> 00:02:32,790 And then up inside the body event listener, we're going to add inside of here if. 36 00:02:33,720 --> 00:02:39,250 Ref current dot contains event dot target. 37 00:02:39,840 --> 00:02:41,400 That's it, that's how we do this. 38 00:02:42,360 --> 00:02:46,140 If that is true, then we're going to return and not do anything else inside of here. 39 00:02:47,310 --> 00:02:52,650 The report currently contains is going to see whether or not the element was clicked on is inside of 40 00:02:52,650 --> 00:02:53,430 our components. 41 00:02:54,240 --> 00:02:58,250 If the element that was clicked on is inside of our component, then we're going to return early. 42 00:02:58,800 --> 00:03:01,200 Otherwise, it wasn't inside the component. 43 00:03:01,200 --> 00:03:05,550 So we should attempt to close the dropdown by doing a set open with false. 44 00:03:06,550 --> 00:03:11,320 And that's it, that's the whole solution now I just want to kind of reiterate just very quickly here, 45 00:03:11,350 --> 00:03:17,860 the contains method belongs to all DOM elements and allows us to check if one DOM element is contained 46 00:03:17,860 --> 00:03:18,850 inside of another. 47 00:03:20,010 --> 00:03:22,290 Yes, let's save this and do one last test. 48 00:03:24,550 --> 00:03:30,550 The back over here, I'm not going to click on the dropdown to open it and then I'll click on a option 49 00:03:31,000 --> 00:03:35,590 when I click on the option, it is contained inside of our component, which means we're going to return 50 00:03:35,590 --> 00:03:36,010 early. 51 00:03:36,810 --> 00:03:37,930 So I click on an option. 52 00:03:38,170 --> 00:03:39,110 We return early. 53 00:03:39,130 --> 00:03:41,560 We do not attempt to set open with false. 54 00:03:41,830 --> 00:03:46,480 And so all we do is split the open piece of state to the opposite of whatever it currently is, which 55 00:03:46,480 --> 00:03:47,260 will close it up. 56 00:03:47,770 --> 00:03:50,650 And then I should also be able to open this thing up, click anywhere outside. 57 00:03:51,280 --> 00:03:55,720 And in that case, the element that we clicked on was not contained inside of that rep. 58 00:03:56,440 --> 00:04:00,670 So we did not return early and we ended up closing the dropdown. 59 00:04:03,380 --> 00:04:04,460 Yes, that looks pretty good. 60 00:04:06,060 --> 00:04:10,620 All right, well, that is pretty much it for this dropdown, so let's take a quick pause right here 61 00:04:10,620 --> 00:04:12,110 and continue in just a moment.