Before we move on, there's one last thing I want to show you around this drop down component.
I can open up my app James File.
Here it is right here.
I'm looking at the app component.
We're going to add in a little bit of code to this thing very quickly to toggle the visibility of the
dropdown component entirely.
So when I say toggle, I'm not talking about opening or closing the dropdown.
I'm talking about whether or not we show the drop down at all.
We're going to add this code in very quickly.
And then as soon as we do, we're going to start to see a really mysterious error message start to appear.
OK, so I'm going to add in a new piece of state inside the app component called Show DropDown, and
I'll get a setter for that as well.
And I'll default that to be a value of true, which means that I do want to show the dropdown.
Then right about the drop down itself, I can add in a button.
But the text of Tuggle dropped down.
On the button, I'm going to add in on click event listener.
So whenever someone calls on this thing, we're going to flip the value of show, drop down to the opposite
of whatever it currently is.
So inside that arrow function right there, we will call set show dropdown and then pass in the opposite.
Of show down.
And then finally, I'm going to wrap the drop down right here with a set of curly braces.
And inside the curly braces, we're going to take a look at the show dropped down.
He said, state, if that is true, then I want to show the drop down.
So notice I got to put in a question mark right here for a ternary expression and a show dropped on
his false.
I'll put in a colon and then no.
Which means display nothing at all.
All we're doing here is toggling the visibility or the existence of the dropdown entirely.
OK.
Let's now save this and tested out.
I see the drop down by default, which is good.
I can still open and close it.
Open it.
Like off screen, everything still works as expected.
But take a look at this.
If I click on toggle dropdown, the dropdown goes away again as expected.
And now if I click anywhere else on the screen, we get a really nasty error message.
So what's going on here?
Well, let's take a careful look at the error message itself.
It says cannot read property contains of No.
And it's pointing out some code inside of our event.
Listener.
All right.
Let's look back over.
And take a look at that inside of our body event listener right here inside of our dropdown Dodgiest
file.
So the air message is saying that refought current is evaluating to know, as it says we are trying
to call it, property contains on.
No, the report current is null instead of a reference to a DOM element, as we would expect.
So what exactly is happening?
Well, whenever we remove a component from the DOM, all the refs that are attached to elements inside
that component get set to note where more specifically the refought current property gets set to null
because we no longer have an element to refer to.
Remember this ref right here?
We are assigning to the top level element inside of our component.
So if that element right there is removed and the dumb ref current gets set to null because there is
no longer an element for us to refer to.
However, we still have this event listener set up this event, listeners still going to run whenever
we click on something inside the dumb.
So whenever we click on something Refco Current evaluates to know.
We then tried to call it a contains property on that.
And, well, we end up with that error message saying cannot refer to contains on known.
How are we going to fix this?
Well, what we really need to do here is make sure that whenever we are about to remove the drop down
component from the dam, we should turn off this event listener.
So to do so, we're going to make use of that cleanup function from use effect.
Once again, remember that we can return a function from USIE effect.
And this will be called right before the next time that this function is called.
There's one other scenario when this clean up function is going to be invoked.
And that is whenever we are about to stop showing the entire drop down component on the screen.
So if we are about to remove the drop down component entirely, this cleanup function will also be invoked.
That makes this a great location to do any kind of cleanup for the entire component that we want to
do instead of here.
Well, we really want to do is make sure that we do not attempt to call this event listener anymore.
We really want to detach or remove this event listener from the body element entirely.
And that's exactly what we're going to do to make sure that we remove this event.
Listener.
We're going to first kind of massage the code we have inside of your.
A little bit.
We're gonna take the callback itself.
So that's the event right there all the way down to the bottom of set open.
We will cut that and assign it to a new variable right above.
Hold on.
Body click.
And I'll paste in that function.
We can then provide on body click as the callback to the body click event listener.
And then finally, inside of our cleanup function, we're going to make sure that whenever our components
are about to be removed from the DOM, we remove that callback entirely.
We'll do a document dump body remove event listener.
Now, let's say that we want to remove an event listener from the click event and a specific event listener
we want to remove is the on body click function.
So now, whenever our component is first rendered into the DOM, because we've got this array right
here as the second argument, we're going to run the use effect function or the function we provide
to it.
Exactly one time at that point, we're going to setup the event listener.
Then whenever our dropdown is about to be removed from the DOM, react is going to automatically call
our cleanup function.
And that's going to remove the event.
Listener watching for that click.
All right.
Let's save this look back over.
Now, I can still open the things tonight, I'm close at all.
Everything is still working as expected.
And if I toggled visibility the down, I can then click anywhere on the screen and I don't get any error
messages.
As soon as I show the drop down again.
Well, it comes back up and I rebind that event.
Listener So use effect runs once again, event listener gets set up again and I can still open the dropdown,
click outside of it and see the thing close.
All right.
Well, that's it.
Well, that was pretty much it for our drop down component.
So we'll take a pause right here and continue on our next little widget in just a moment.