All language subtitles for 022 Working with useContext()_en

Now that we had a thorough look at you, state use of fact use reducer y'all to use to use callback.

Let's have a look at how we can use to context API, which is also an exciting feature about REACT together

with functional components and Hooke's.

And for that, I got my all for Jaspal, which we haven't used thus far, which is a very simple login

form.

Well, it doesn't even have inputs, but it has a login button, at least, which we can click.

And I want to show that if you're not logged in yet and alternatively show my ingredients if we are

locked in, that's where the ABC's fall will come into play.

Right now, it always returns ingredients.

The goal is that now this does not always return ingredients, but instead it returns either ingredients

or the off screen.

So here in the U.S., I'll import all from components off, and while we could not always return off,

of course, which means we would always see this, but now we got no way off going to our ingredients.

So the goal will be that we switch between those.

Now, of course, for that, we can manage all the off logic here in app, use a step in to render different

content.

We could do that.

But in a more complex app, of course, you might be interested in whether the user is authenticated

or not in a couple of components, maybe deeply nested into other components and therefore passing data

about the authentication status via props might not be what you want to do because you build very long

chains of props, which you have to pass around.

That's what context can help us, Fridell, create a new fuller context, which is optional, but I

like to store my context in there and named as off context, just as the filename in there.

Now, in this off context file, we can create context by importing react from react.

And then we create our, let's say, off context.

Name is totally up to you, but should start of the capital character actually by calling react create

context.

And this is also something I covered earlier in the course already.

This is the context API offered by react.

So go back to that component deep dive section.

If you're not entirely sure what this means now we can initializes with a value and Deira want to manage

whether we're authentic or not.

And I want to provide a login function which here is just an empty function but which I still adhere

to get better.

All the completion will overwrite this with a concrete value soon.

I will also export this context object, but I will also use it in that same file to create a component

there.

I'll named a component of context provider.

It's a normal react component, a functional component, as you can tell, and in there I return.

Off context dot provider, so I'm using off context up there and this automatically is a valid react

component, or at least with dot provider, it gives you a valid react component.

And between their.

I want to allow anything, so I'll add props children there so that we can use the off context provider,

pass anything as a child to it, and it will be wrapped by our context.

Now it's in here where I'm going to manage to log in status, and I'll do this with the help of U.S

state now use state because it's a really simple state.

It's a simple state because I only want to track whoever the user is, authenticate it, and I want

to be able to set is authenticate it.

Or not, and initially, the user is not authenticated, which is why initializes with a false value.

Now, all that aFunction year log user in or whatever you want to name it or log in handler to name

is totally up to you.

This takes no arguments here because it's just about showing how to work with context, not about really

taking inputs here and validating that.

And then I'll call set is authenticated.

And that is true.

That's what I do here.

Very trivial function.

Now the off context provider gets a value which will automatically be distributed to everyone listening

if if it changes, which describes our context.

Initially we have this starting value, but now it will immediately overwrite it with a new object where

I have log in and that's my log in handler pointing at dysfunction.

So now we have a real function behind it and is off where we have is authenticated.

So it is state value.

And again, if this changes, so, for example, if you call set as sophisticated, everyone listening

will get this updated value.

So now we just need to export maybe as a default dose of context providers.

So just component, which we built here.

And now I have this default export and here we have a named export.

And now we can use that and we can use it in the index today as follows the root of our application

there, we can import you off context provider from.

Context and context of context and wrap our entire app with it, so wrap the entire app with off context

provider like this so that the entire app receives our context or is able to receive it.

You can listen to the context from everywhere, the app.

That's the right way of putting it.

So all context provider is wrapped around our app and app as I'm already interested.

And that's the thing which could be problematic with functional props.

We can of course, import our off context.

So not the provider component, but the context object itself from context of context.

However, here, I mean, the named export, so we have to wrap this in curly braces and what we can

do is we can wrap this year with off context dot consumer now to set up does this render function in

the end in there?

This would be how you can use context and functional components.

This means that if you need data from the context anywhere else but in your J as X3, you have no way

of getting it.

You would need to transform this into a class based component so that you can add to static context

type thing, which you might remember from earlier and the course.

Well, thankfully, there is a hook to also fix this.

The U.S. context hook.

You use it like this, you pass in the context you want to listen to, so to say, off context in my

case, and you get a handle to that context, which is then stored in this constant and you can name

it whatever you want here and name it off context.

And now here in Objets.

I can listen to you off context, dot is off or not listen to it, but check it and this will be rebuilt

whenever the context changes, whenever value in their changes.

So whenever we changes all, for example, then this will rebuild.

So here a listen to it.

And then I want to output a different content.

Let's say my default content here is off component like this.

But if we are authenticated, then content of course, is the ingredients component.

And then down there, instead of hard coding context, I return content, which is change depending

on the value in context.

Now, we just need to make sure that clicking on the login button also does reach the well log in handler

function here.

Keep in mind that a pointer at this function is stored in log in in the context, so all they have to

do is I have to go to the place where the button is, which is in the off component, and also import

the off context to dare off context named import from.

The context folder off that context and import the use context, Hoak here as well, and now here.

I can get access to my off contacts with you as context, pointing out of context.

And the Log-in handler, I'll call off context dot log-in as a function.

And now with that, if you click that button, we're locked in, we see the ingredients, so this is

how we can work with context, with functional components and the U.S. context hook.