All language subtitles for 016 Working with _Event Props_ (Passing Function As Props)_en

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.