Here is our problem statement.
Here's what we are trying to do.
If we open up the dropdown and then click outside of it, we want to close the dropdown.
Sounds simple, right?
Well, like I said at the end of the last video, more challenging than you would think.
Now, the next coming videos are going to entirely focus on just understanding how we can close this
dropdown down.
It sounds like a very simple problem, but we're going to have to understand several different concepts,
both in the world of the DOM H.T. mail and react to actually implement this.
I can go into a lot of detail on these different concepts.
And the reason for that is that even though we are applying them to a very simple dropdown widget,
it turns out that these different concepts are going to come back up in a variety of other different
widgets.
You're gonna build throughout your web development career.
So, again, we're gonna spend a decent bit of time here.
It is because you really need to understand these different concepts.
All right.
So first off, why is this challenging?
That's just the only thing I want to tackle inside this video.
Inside this diagram, I've got kind of a rough sketch out of our HMO structure.
More or less inside of application right now.
So we've got some body elements at the very top.
We've then maybe got some div right here in inside there.
Maybe we are showing the dropdown component.
Now, the dropdown component itself doesn't actually get inserted into the Dom Persay.
In other words, there's not an element inside the dome called dropdown.
I only put this little block inside of here to indicate that everything underneath this represents elements
created by the dropdown components.
I'm also not showing every element that the dropdown is creating.
The dropdown in total is making UI form a div with field a label a div with UI selection dropdown and
the list of options, et cetera.
So I've just abbreviated the list of elements I'm showing here.
Also, for the purposes of this diagram, I'm going to assume that we are also showing the accordion
component on the screen, even though we are not right now.
Now we understand these blocks.
What's it all about?
Well, with our dropdown component, we have, of course, a react component.
Whenever we create a react component.
We return some J.S. X, that J.S. X that we return, create some number of elements on the screen.
And we can also optionally setup event handlers by providing some props to those elements.
We have learned this throughout this course.
We've learned many times that we could set up event handlers like on Klick.
And whenever we click on that element, we're going to run that function.
And the key thing to keep in mind here is that the drop down component can only use that syntax.
In other words, this kind of style right here to set up event handlers on elements that it creates.
The dropdown can only watch for clicks easily on these elements.
The dropdown, on the other hand, can not easily listen to click events or any kind of event on any
component or any element that is not created by the dropdown.
The dropdown can not easily set up a click event handler on, say, the body or some element that is
created by the.
The accordion or some other div that might exist inside of our app.
Lets just topic number one that we need to understand.
We are trying right now.
To click on some element on the screen that is not created by the dropdown and the dropdown just has
a hard time to receive or listen to any events that are triggered by clicking anywhere else on the screen.
And ironically, that's exactly what we want to do.
We want to listen to click events being issued to something outside of the dropdown.
OK, so that is the whole reason that this is challenging, because the built in event system that we
have with react, this entire feature of adding on click event handlers to particular elements only
allows a component to listen to clicks on elements that are created by that component.
Now that we understand the challenge here, we're gonna take a quick pause and go through a quick series
of videos.
And in each these videos, I'm going to give you a different topic that we need to understand who eventually
implement a solution for closing this dropdown.