All language subtitles for 002 Preparing the Demo Project_en

So I'm going

to remove my comments here

so that we again

show it all the time

and in the Modal JS file,

I got an on click listener

on the dismiss button

where I admitted this closed event.

Now let's say,

I want to control

whether the model is displayed or not

inside this modal JavaScript file for now

by simply showing or hiding the modal.

Now that is of course,

something we can do

and we can easily do this

by going into the modal CSS file

where we define a style for this.

I'm by the way

not using CSS modules here

but still this is the only file

I used as modal CSS class.

So there we could control

whether it is modal as visible or not

by adding a modal open class

to it when it should be shown

and a modal closed class

when it should not be shown

and then of course,

one trivial way of

sure controlling this is to set display

to block when we have modal open

and display to none,

if it is should be closed

and we should do the same

for the backdrop.

So when you backdrop CSS file,

I'm also going to add

backdrop open and backdrop closed.

Now with div,

we just have to add some codes

to both files to make sure

we actually take advantage of that.

So, first of all

I'm going to refactor this

backdrop component function,

you're into a function

with curly braces where I then

will return to JSX eventually

but before I do so

and that's the reason why

I converted this, I want to create

my classes array basically.

So my CSS classes,

I want to attach here

should be an array.

It should always be backdrop

but then it should be

backdrop open or closed

depending on some prop I receive.

So let's say I check

if props show is true

and only if that is true,

I want to add backdrop open

otherwise I'd add backdrop closed.

Now, finally what I need to do is

I need to attach this class here

so the CSS class is constant

and call join

to join us into a string.

Now with that we can control

the displayer of the backdrop

I'm going to copy that code

into my modal JS file

add there to all refactored is

to take advantage of the fact

that we do have a function

where we don't just return something

but we will return something

before we do so,

I also want to control

my CSS classes here.

So let's make sure

we return the JSX code here too

but then as I just said

we should have CSS classes

where we have modal

and then we have

modal open or modal closed

and I actually used that

as my CSS class name here,

again joining it into one string

with that join method.

Now with that we just need

to pass the show prop

to backdrop and modal.

We can do that

in the app JS file.

There we have a class based component.

Let's now add a state

where we add modal is open

and set this to false.

So let's say at the beginning

and then I will simply

change this state.

So in this class,

I'll add show modal.

That should be a function

where I simply call this set state

and set modal is, open to true

and then I will have

a close modal function

and that of course

is all pretty much straight forward.

Nothing new in the closed modal function

I will set modal is open to false,

just like that.

Show modal and close modal.

Now in the modal component, again

I do call this closed prop

on a click on the dismiss button.

So that is the close prop

is what I should bind

to my close modal method here.

So closed will be equal

to this close modal

and the backdrop and modal,

now both need to receive the show prop

that should be

this state modal is open

because that will determine

whether we want to show

or hide the modal.

Finally, we need a way

to show the modal and we've got this

open modal button here.

Now, all we have to do is

hookup the on click listener there

to this show modal

and now with all these things,

if we save this

we go back to the application.

I click open modal

we see the modal.

I click dismiss, we dismiss it.

Now that's all nice

but we have no animation.

So again, finally,

let's work on this animation

in the next lecture.