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.