Nicely done.
And once we've got our general structure, well, now I think how you would toggle the model and sidebar
dynamically instead of removing and adding the class ourselves.
And, of course, we would need to set up some kind of value.
We have already done that before where it would be there for the true and then depending on that, we
would add or remove that class.
Now, all of that is nice.
But you notice here that, of course, I cannot open the model from the model because the button is
actually sitting in the home.
So I cannot set up that state in the model that is not going to work.
So technically, you can make an argument that we could set this up and object since Abcess has the
home model and sidebar.
So and here again, we could set up some set values.
We can come up with functions and that inside of those functions will toggle.
Then we would need to pass the open function down to the home because of course this button on this
button would need those functions.
And then in the model and in the sidebar where we would want to close them and where we would want to
check for those that values.
Well, from the objets, we would pass down both things to the model and the sidebar.
Now, the problem with this setup is that our app component is going to get gigantic Restall since will
be adding more and more and more functionality here.
And the second one is, of course, that we're going to be doing the prop drilling work from the app
will start passing down to the home.
And we need to imagine that in home component we might have more components and maybe the buttons or
maybe the elements that are looking for those functions or those values are far down in the componentry.
And what that just means is that we'll be pointlessly passing props through the components that don't
need them.
OK, and where we know that, of course, we can fix that using the context, just how the difference
is going to be.
Like I said in the intro, that we are going to wrap our whole app in our context, not just that one
folder like we did in tutorial.
Since I assume that you already wash your part, I will try to keep up the pace.
I'm not going to go from scratch, so I'm going to go with CONSED and then we're creating the context
then that is equal to react context.
And of course I'm working in the context just right now.
The Senate note, we create a context, we get back to components, we have one for the provider and
then the second one for the consumer.
We want to use the consumer one.
However, we will use the provider.
And then I would want to create a component so that as a separate component, I'm going to go with app
provider over here and we need to pass in the children.
Since we need to understand that, of course we will wrap our whole up in app provider.
So if we want to the children.
So if we want to say, yeah, get me the children and then return children inside of our component,
then of course we won't be able to see anything.
I'm not sure that at the very end and not once I have my component from this component, what I would
want is to return app context and then remember the name was provider and then inside of this provider,
I would for sure want to have the children again.
Otherwise I won't see any of my components.
And then I remember the cool thing was that we can pass in the value and in that we can write whatever
we would want.
So let's just start simply by passing in the hall.
But then from this component, I would want to export to our own export app context because you use
context.
We'll be looking for that.
And then also amplifier.
Now, I'll show you two ways.
One is how we can use use context in any of the components and also the second one, how we can setup
custom hook that right away returns and you'll see what I mean by second.
So first, I would want to export both things out on export app context because I will need it as well
as the app provider.
Now app provider I would want to import in the index Jayesh.
So this is the part where I didn't have the import, so you'll have to do it yourselves.
So we're going to go import then we're looking for a specific name.
So we go with curly braces and an app provider and then from and of course we're looking for context.
So we've got our own provider.
And then inside of the reacts remold, we go with our provider.
And now I would want to wrap my whole app in that app provider.
And again.
If you won't do this, if you want the children, you'll have a big, fat mess.
OK, so you can save it and you can see that you won't be able to see everything.
So I always, always make sure that you display the children.
So first, that you access the children in the component that's wrapping your job.
And of course, you also return them.
Otherwise, it's not going to make sense.
By the way, again, spelling is not my best friend, so I'm going to go with children over here.
And now, of course, I can see my components now.
It's really cool that in any of my components, the home, the model, the sidebar, the AB, I can
access those flowers, not the moment that is just hello, but that is already a good start.
So first, let's take a look at the example.
How will use use context plus the app context in specific component.
And then of course we'll set up a custom hook.
So let's say here, custom hook over here.
Let's save the context just for now and I'll demonstrate that in the home.
Just so in the home.
Yes, I'm going to go for import than I would want to import that app.
Context, context.
It is coming from the context, Mark.
So and then I also would need my use context.
So we go here with used context.
So once I have my use context, I definitely need to pass in my context in order to access that value.
And for the time being, I'm just going to say maybe not console.
I get I'm going to go with const data is equal to years context and then I pass in the app context of
course.
And once I do that, I'll notice that I'll successfully grab that halo that I'm passing in.
So even if this would be, I don't know, ten more components DB, I can simply look for my use context
than for my app context, which is of course the one that I'm creating over here.
And then of course I can access it.
So if I go with data I will see in my console, by the way, I have an open, bigger browser window.
So there it is now inspect and of course in the console I should see the yellow Lárus and that is coming
from the home.
Come on.
So that's really cool.
Of course, that means that eventually we'll set up our functionality and functions over here in a provider.
Now, before we do that, though, I would still want to show you how you can set up custom.
So imagine the scenario where you wouldn't want to import in every component the use context and also
you wouldn't want to import app context.
What if I would just want to import the custom hook and all right away I have access to the same context.
Again, please keep in mind, functionality won't change just the implementation where we don't need
to have that many import.
So what we could do is use the use context and we're going to create our custom hook and all right.
Or export it export content and not use.
And then you need to come up with a name.
As long as you start with years, you'll be in good shape.
So in my case, I'm going to go and use global and context.
Then I would want to return from this custom, hook my use context, the one that is coming from react
and then just pass in the app context.
So now, of course, instead of importing in the home use context and the app context, what I could
do is just grab my use global context, use global context, and instead of calling use context or app
context can just say that I would want to access use global context.
I would need to invoke it.
And then you'll still notice that in the console you'll have the hello.
OK, so those are two methods, how you can access that context globally.
If you want to import in every component, use context and grab that specific context.
You can do it or you can set up your customer.
Just please keep in mind, when we talk about custom hooks, you need to have this use otherwise, even
if the timing is correct, because the moment he complains that, of course, there is no such name,
even if the name is correct, you'll have a big fat error y well, because we are calling use context.
OK, so one of the react hooks not in the component and not in a customer.
So we're just calling this in a regular function which we cannot do that is not allowed.
So if you want to use react hooks, it either needs to be a component or it needs to be a customer.
And in order to create it has a custom hook, we need that use.
So use global.
So let me go back, fix it in home, Jess and I should be in good shape.
So as always, you have few options and in my case, I'm going to stick with that huge global context
if you want, or you can go this route as well.
I just think that we can save on fuel imports along the way if we use this custom hook route.