To get rid of the modal and the Backdrop now
we need to change the state again
from setModalIsOpen true to false.
We need to call setModalIsOpen again
and pass false as a value.
The problem just is when do we wanna do that?
We wanna do that when the Backdrop is clicked
or when the Cancel or Confirm buttons are clicked.
We don't wanna do that
if the modal itself is clicked for example.
Now for the Backdrop click,
you could think that on Backdrop,
you simply add onClick again
and then we add a second function here
the closeModalHandler, let's say
and there we call setModalIsOpen and set this to false.
And then we point at this closeModalHandler here
as a value for onClick,
just as we did it with the button in the end.
But that won't work.
If we save that
and I reload,
I can click the Backdrop the entire day
the modal won't close.
The reason for this is that,
the Backdrop like the modal is our own component.
These are not built-in components.
So they don't know the onClick prop.
Our own components have to be configured 100% by us.
They have no built-in props which we can use.
To be precise, they actually do
but only for some very special cases
and not for event listeners like this.
So if you wanna make sure that our onClick prop exists
in the Backdrop component, we have to add code
to this component function to support this prop.
And for this we can go to the component function
and accept this props.
Argument here does props parameter
and then here, we can of course work
with the onClick prop or any other name we want.
It's totally up to you because it's our component.
But here we can, for example, expect a onClick prop
because I'm setting this here in the to-do component,
and we actually expect a function as a value
on this onClick prop
because in the to-do component
I do pass in a function in the end.
I point at a function
which means I pass a point or two to function
as a value it for this prop.
Now in the Backdrop component
we actually wanna call this function,
which we receive on the onClick prop
when this div is clicked.
Now the div is a built-in component again,
so it does have onClick prop
and now we could simply point
at props onClick as a value here.
By doing this we would in the end
forward the function which we receive on our props here
on our onClick prop
into that div on it's onClick prop.
And these names don't have to be equal.
We could expect a onCancel prop here instead
and in to do component rename this to onCancel.
It's our components so we can name this however we want.
Now if we do that and save all the files,
if I reload, now we can close the modal
by clicking the Backdrop
because now we're using a prop
to pass a function as a value.
And that's a pattern which can be confusing
and might look strange at first,
but keep in mind that in Java script
functions are first class objects.
You can pass them around as values
just as you can pass strings
and arrays and objects and numbers as values.
Hence you can pass a function as arguments
to another function and therefore also as a value
for a prop to a number of component.
And then that function which we receive in that component
can be executed in that component
or as we're doing it here, it can be forwarded
to yet another element another component.
Now we can use that same approach
in the modal component for canceling and confirming.
There we could add functions like the cancelHandler.
and then let's say the confirmHandler
and kick off different logic
depending on which button was clicked,
but in this case, I'll simply
in the end run the same code in both functions.
Nonetheless, we can bind the first button
with the onClick prop to cancelHandler,
and here it has to be onClick
because that's not a custom component,
but a built-in one.
So here we can't come up with any other name.
And for the Confirm button I'll also add onClick
and point at the confirmHandler.
And now in these functions
we can run any code we want.
In this case though I also wanna
just close the modal.
So again, I'll just accept the props parameter here
and then cancelHandler,
I'll just execute props on Cancel let's say
in the confirmHandler
I'll execute props on Confirm.
And hence instead of defining these functions here
and pointing at them here
we could have also just forwarded props onCancel here
like this.
Just as we did it for the Backdrop.
I'm just showing this alternative approach
to make it crystal clear
that you can execute these functions
which you receive through props.
You can forward them to other elements
if that's what you need to do
but you can also execute them anywhere in your components.
And hence, I'm using this alternative setup
with these extra wrapper functions
at which I then point here.
And now we've got our onCancel and onConfirm prop
which are expected on that modal component.
So in the place where we use the modal component,
we should add onCancel and onConfirm.
And here in both cases
I'll just point at the closeModalHandler
because as mentioned before,
here I got no special logic
I just wanna close the modal.
With that if we save this and reload
we cannot just close the modal by clicking the Backdrop
but also by clicking Cancel or by clicking Confirm.
And that works for every to-do here.
For all to-dos the modal works in the same way.
And that's there for another very important
building block of react.
Props are important for building reusable components,
state is important for changing what we see
on the screen dynamically
for adding or removing elements
for changing text on the screen
or like in this case for showing and hiding an overlay.