Original subtitles

Now we learn quite a bit about this transition component over the last lectures,

now one important thing to of course know is that you can also nest this inside any component you want.

So of course we could move transition from the app.js file into our modal.js file and simply wrap our

entire modal with this transition component in there.

That of course also requires us to import transition from that package though,

so import transition from react.css or excuse me, from react transition group transition, like that.

And now we just need to update our code and basically say again that modal is always present in our

app.js file, this component,

show is therefore again back to this.state.ModalIsOpen and now a show inside the modal has to

be used differently, now a show is a property

controlling is in property here

so now this should be bound to props.show which is true or false

now again and therefore, when we control our css classes here we should do that inside a function

between the transition component opening and closing tags where we get the state managed by the transition

component where we then eventually return our div which holds the modal and where we then of course

no longer attach modal open and closed like this here on css classes, instead that's just an array

with modal. Down there instead

in this code we return inside the transition component, there

I instead now need to change my css classes and conditionally animate this. So therefore, let me

restructure this to a function with a function body where I don't just return something because before

I actually return the jsx which should be entered inside this function here, I of course want to

adjust my css classes, so I will essentially grab my constant from up there and now configure

it here to be either just the modal or

now again checking for state being equal to entering, that's the case then I want to use modal opened,

this one here

otherwise if state is equal to exiting and I'm using this entering and exiting classes to move in right

at the point of time we start the animation,

so if it's exiting then I want to have modal closed and in other cases I'll have null, so the same logic

as before but now inside the modal.

If we try this out, we should still get the same behavior as before though.