USRAP is probably the easiest to hook to use out of all the ones we're going to look at.
So let's just get to it back inside of our ED at the very top, I will import USRAP and then right after
we declare a piece of state, we'll say ref is use ref.
We're then going to take that ref object and assign it to one of the elements inside or one of the elements.
We are returning from this component.
So in our case, we want to get a reference to the most apparent element that we are returning from
our component.
That is the div with the class name of uniform.
With if we put in roof equals roof, and that's pretty much it.
Now, after our component is rendered for the very first time, we can get a reference to that div by
making use of refought current, it is specifically the current property on the roof that is going to
give us a reference to that div.
So as a quick example of that, let's put in a console log right above that return of refought current.
And I'm going to say this, flip back over, you'll notice that the very first time our component is
rendered, we get a slug of undefined.
That is because we are logging the value of wrapped up current before we return.
Any jousts before the ref has been bound to this div and before that div has even been created inside
of our dome.
However, after that, any time that we render our component current will refer to our top level div.
So I'm going to clear my console and then I will cause a render by changing the status of my dropdown
component.
We can do that very easily by just opening the dropdown.
Now, I left in the other log of the actual element that was looked on, so I'm going to go remove that
or come into out very quickly the back up here at the document body event listener.
We'll just delete that really quick and we'll try that again.
It's going to open that thing and there we go.
We now have a direct reference to that top level element inside of our component.
Do we access that through refought current?
OK, so we now know the element, the most apparent element inside of our component and we know the
element was actually clicked on.
So to be able to make the distinction.
Between scenario number two and scenario number one and decide whether or not the body event listener
should do anything, the last thing we have to do.
And can remove that council log.
And then up inside the body event listener, we're going to add inside of here if.
Ref current dot contains event dot target.
That's it, that's how we do this.
If that is true, then we're going to return and not do anything else inside of here.
The report currently contains is going to see whether or not the element was clicked on is inside of
our components.
If the element that was clicked on is inside of our component, then we're going to return early.
Otherwise, it wasn't inside the component.
So we should attempt to close the dropdown by doing a set open with false.
And that's it, that's the whole solution now I just want to kind of reiterate just very quickly here,
the contains method belongs to all DOM elements and allows us to check if one DOM element is contained
inside of another.
Yes, let's save this and do one last test.
The back over here, I'm not going to click on the dropdown to open it and then I'll click on a option
when I click on the option, it is contained inside of our component, which means we're going to return
early.
So I click on an option.
We return early.
We do not attempt to set open with false.
And so all we do is split the open piece of state to the opposite of whatever it currently is, which
will close it up.
And then I should also be able to open this thing up, click anywhere outside.
And in that case, the element that we clicked on was not contained inside of that rep.
So we did not return early and we ended up closing the dropdown.
Yes, that looks pretty good.
All right, well, that is pretty much it for this dropdown, so let's take a quick pause right here
and continue in just a moment.