All language subtitles for 011 Managing Cart & Modal State_en

So how can we now ensure

that the Cart is only showing up

when the your Cart button is clicked,

and can be removed if we click on the backdrop

or the close button?

Well, we need to manage some state

because we have different states now.

One state where the Cart is visible

and one state where it's not visible.

These are two states.

And whenever you have more than one state,

you need to manage that state with React.

And in function components as we have it here,

we use use state for that.

So we import use State from react in the App.js file.

Why in this file?

Because data's where we do render the Cart.

So that is where I wanna manage

the visibility of the Cart.

Of course, we could also do it in some parents component

and pass down the state's data from props,

but the only parent component to the app component is index.

And that's not even a component,

that's just where we initially render it,

and therefore we actually have no parent component.

And even if we would have,

it makes a lot of sense to manage it here.

So, inside of the App function,

I will use the structuring to pull out the two elements

I get back from calling use state.

My initial state is false

because dad is my cartIsShown state,

and we also have a set card is shown function.

And here we are just using useState,

as you learned it from this course.

Registering it with react,

so that react can manage this state for us

for this component.

And then getting access to the latest state snapshot,

whenever this component is re-evaluated and getting access

to this function, which allows us to update the state.

And then here we can add a couple of functions,

cue that functions.

Functions which should be called

when this button is clicked for example,

or when the backdrop is clicked.

Because I'm talking about a showCartHandler function.

Which is a function defined here inside of the App function,

in which I then call setCartIsShown and set this to true.

And then I'll also add a hideCardHandler function like this,

where I setCardIsShown to false.

And now we just need to use that cartIsShown state

and make sure that these two functions

which are just added are getting called.

Now, let's start with using the cartIsShown state.

In the end,

we wanna render the Cart component conditionally.

And you'll learn how that works.

You can simply wrap this in curly braces

to evaluate a dynamic expression.

And then axes cartIsShown and use stat shortcut

with double and operator to render a Cart,

if this is truthy and not render it, if this is falsy.

And with that,

the Cart disappears because initially it's false.

Now showCartHandlers should be called

whenever this button is clicked.

This button however, is part of my Header.

So therefore, we should probably expect

to get that function, that showCardHandler function called

from inside the Header.

And for the header, to call this function,

we need to pass a pointer at the function

down through props.

That's also a pattern you learn about

through out this course.

Now it's up to you, how you name that prop,

but the convention for these props which hold functions,

is to start with on.

Since these are kind of like custom events

which triggered this function, if you look at it like this.

And therefore here I'll name it onShowCart,

again, name is up to you,

and I point at the showCartHandler.

Important, don't execute it here, just point at it,

so that it can be executed from inside the Header

through that onShowCart prop.

So insides that Header component,

we now wanna execute that function,

and we wanna execute it whenever this HeaderCartButton

is being clicked.

Now, this of course, is a number of custom component,

and therefore here, let's say we expect that we have

a onClick prop, again, this is up to you,

I'm just using this name,

which looks like the built in onClick,

because indent one React to the button being clicked.

But technically you can use any name you want here,

because you will have to write code

inside of HeaderCartButton to handle this prop anyways.

But to this prop, I wanna pass a pointer, to that function,

I'm receiving on props onShowCart here.

So in the Header component, we received the onShowCart prop,

which points at showCartHandler.

And now I'm forwarding that point at that function

to the onClick prop on the HeaderCartButton.

And now in the HeaderCartButton we therefore

need to handle that onClick prop which we receive.

Here on that built in button,

there is a built in onClick prop,

so here the name is not up to you.

And I now wanna point at props onClick.

So that the function I receive on

onClick in the HeaderCartButton,

is forwarded to the enclave prop on the button.

This can be confusing,

but in the end we're just passing down a pointer

at this showCartHandler button to that HeaderCartButton.

Now, you learn that if you have a prop chain like this,

where you pass a prop through multiple levels of components,

could be replaced with context.

And indeed we could use context here,

for handling this Cart visibility state.

I will not do it here though,

because I think here it is okay to have these two levels

of components through which I'm passing props.

But you could implement context here as well

if you wanted to.

We are going to use context in this demo application as well

but not for this Cart button.

Here I will instead go for this prop drilling,

so for this chain of props.

With that however, if you save everything,

if you click your Cart, it should open up.

Now to make it closable, we wanna make sure

that both that close button

as well as a click on the backdrop closes the Cart.

So they for in App.js, where we use the Cart component,

we should probably expect a onClosed prop

or something like this.

As always the name is up to you,

to which we pass the hideCardHandler.

And now it's inside of that cart component,

where we need to handle this onClosed prop.

For one, I wanna go to that Close button

and dare at onClick prop,

and point at prop start onClose.

OnClose because that's the name I just chose

in the App.js file.

It's the onClose prop on which we received

the hideCardHandler and they offer it's dysfunction,

which I now wanna forward to the button.

So that, when I click on the button,

that hideCardHandler function is being called.

Now that's one way of closing the Modal.

It should always be closed, If the backdrop is clicked.

And to make that happen,

we should go to the Modal component.

And on the backdrop there,

we should add a onClick prop to the div,

so using that built in onClick prop,

which exists on basically all HTML elements,

and there, forward the value we expect to get

on whatever prop you want.

So here let's say, I expect to get a onClose prop,

now here, when we use the backdrop,

we need to set that onClose prop,

because we just added it inside of the backdrop.

And here I expect to get another onClose prop

but now on the Modal component itself.

So again, here I'll be passing a value

through multiple levels, down to the backdrop.

You could use context, but I also wanna highlight,

that if you are using context and you always bind a Click

on the backdrop to closing the Cart,

then you would make the spectrum very specific

and you would not be able to use the Modal for ever

kinds of content.

Because clicking the backdrop would always close the Cart.

So if you had our content, in Modals as well

then you would be too specific.

So here, using multiple levels of props,

could even be better,

because in this case, it makes the Modal more reusable

and doesn't tie it to one specific use case.

That's just a side note.

Why here?

I think using props instead of context is good,

even though we are passing data or to be precise

a function through multiple levels

of components in this case.

And they are for now in the Cart component,

on Modal, we can add the onClose prop as well

and forward props onClose.

And that's now the onClose prop for the Cart component

which is being set in the App component.

And that is then this hideCartHandler function.

With that, We can open the Cart,

click on the backdrop to close it

or click on the Close button to close it.

So that's working.

And with that, we implemented the Cart,

at least with some dummy data here.

It's not finished at all at the moment though,

as a next step, I want to make sure that we can really

add Cart items and then we'll also refine the Cart overall,

and so on.