All language subtitles for 010 Adding a Modal via a React Portal_en

So let's work on that modal.

For that in the UI folder, I'll add a modal JS file.

And that hatched unsurprisingly,

you find this styling file for this modal,

the modal module CSS file.

And then here we have that modal, which will receive props.

And of course we export this component, like this.

And then here, we can also import classes

from dot slash modal dot module dot CSS,

and then work on the markup for this modal.

And here I will have a special markup kind of

because I wanna use React Portal for both my backdrop.

So that thing behind the modal overlay

which blocks interaction with the rest of the page.

And I also wanna render the modal overlay itself

with React Portal to use that component wherever I want

by to render the actual HTML elements

in a specific place in the DOM tree.

That is something you learned about

earlier in the course Portals.

And to render a Portal, we first of all need to go

to the public folder and they are the index HTML file.

And here we got this root div where the overall

React application is being rendered.

And above that route div,

I will add a number div with an ID of over lace.

And that is the div where I wanna Portal my modal

and the backdrop too.

So that is a change we need to make to any HTML.

And with that back in the modal JS file

we can create the backdrop

and the overlay and then use the Portal.

Now it will create two separate components for debt.

And since they are really closely tied

to this modal component and both very lean

I will treat them here in the same file.

But if you go for a separate files

that of course would also be fine.

But I will add the backdrop

component function here in this file.

And then also the modal overlay component function

and both received props because both will receive data.

Now for the backdrop, we return a div with a class name

of classes dot backdrop using that backdrop CSS class

which is defined in the modal module CSS file.

And for the overlay, I will return a div

the class name off clauses dot modal.

And inside of that, I'll have a number div

with a class name of Classes dot content.

I simply have these two devs for styling purposes.

And then inside of that inner div I'll put prompts children.

So in the end, this will be the actual content passed

between the modal opening and closing tax by it

a component where the modal is getting used.

It won't work right now, but it will work in the future.

So now we got these components

now here in the modal function which is the main component

which is being exported here.

We now of course all need to return some markup.

And there, I wanna have backdrop and overlay site by site.

And for this we'll need the fragment.

So I'll import fragment from React

and then simply return fragment.

And in there now backdrop and modal overlay

and this is how we could do it, or actually modal overlay

like this to forward the content between the modal tech.

But this is how we could do it

if we would not be using the Portal.

Now we technically don't have to use a Portal

but to ensure that our HTML code is not all over the place

in the final application, I will use Portals here.

And therefore I will output two dynamic expressions here.

Side-by-side and that will call the create Portal method

which is built into React in both these expressions.

For div we need to import it

and it is actually important or it is a way liable

on the React DOM object from React dash DOM.

So not the React library itself, but the React DOM library

which of course also is by the React team though.

And with this import add a day offer

we can access React on create Portal

and create a Portal for the backdrop

and do the same down there.

React on webs, React on create Portal for the modal overlay.

And here we need to pass props children

between the opening and closing tax.

So that in the modal overlaid that can be used.

Now create Portal needs a second argument though.

It does not just need to know what to Portal

but also where to Portal it.

And the effort we should select is div here

with the idea overlays in our index HTML file.

Now, since we will need that in both creative Portal calls

I will create a help or constant here,

which I'll name Portal element.

Obviously the name is up to you

and here we can access document get element by ID

overlays to get access to that overlay stiff.

And then it's this Portal element, which I pass

as a second argument to both create Portal calls.

And that's not a finished code for debt modal

at least for now.

And with that code, we can go back

to the cart component and there replaced

that wrapping div with modal.

Like this, obviously for div we need to import the modal

component first though.

So import modal from going up one level UI modal

not from the CSS Faldo, but from the JS file.

And then we can use modal as our opening and closing tack.

And to see this in action now

we need to use that card component somewhere

and I will use it in the app JS file.

So here I will now import cart

from dot slash components cart

and then the cart JS file like this,

and then maybe above the header,

the exact position doesn't matter too much

since we use a modal with a Portal anyways

but here I will then add cart,

not card, but cart like this.

And if he saved us, we should have this cart modal here.

Now at the moment it's always there

and we can't make it disappear

but that is something we're going to add next

because of course it shouldn't always be there.

It should be data when the, your cart button is clicked.

And of course it should also be closable.

And that is definitely also something you

can try implementing on your own

but of course we're going to do it together

in the next lecture.