All language subtitles for 007 Class-based Components & Context_en

Now what about context

and class space components?

Well the first important takeaway is that you can still

define it and provide it as you learned it.

You define it by calling create context, maybe with some

initial value and you then provide it by using the provider

component which is part of that creative context object.

And then you can pass a value to that and here it's actually

a static value which never changes, but it also may change

with state updates and that all doesn't change only the way

you update state of course changes if you use a class

based component, as explained over the last lectures.

As a side note, if you want to follow along, attached you'll

find the updated app component and this users context JS

file which you can add into a newly created store folder.

But back to that, here we provide as we learned it.

The only part which changes when you're working with context

is related to how you use it in your class based components.

Now I haven't edit any code for using context up until

now so therefore let's go to the user finder and think

about how we could add it there.

There let's say I no longer wanna work with the dummy

users defined in this file, I no longer wanna get my data

from there, but instead I want to get my data

from context, because it's managed application wide.

If this would be a functional component, we would of course

used the use context hook for that.

That's what we would do, but this is not an option here

in the class based component because we can't

use hooks there.

Instead here we got two ways of using context.

One approach was shown to you early in the course already.

The context consumer component can be used in both

functional and class based components.

So in your render method you could import the users

context, so add it here and of course import it

from the users context file.

And then simply add that consumer or access this consumer

component and then use it as showed to you early

in the course.

Since this is used in JSX only it works in both functional

and class based components.

But the user hook is used so that we don't have to use

this consumer component.

So what's the equivalent to this?

There is no perfect equivalent, I will say that right away.

With use context, you can listen to multiple context

in one of the same component by calling use context

multiple times and pointing at different contexts.

This will not be possible with class based components,

because there you can only connect a class based component

to one context.

And you do that by adding a static property,

by adding the static keyword here and then adding

the property named context type written like this.

And then you assign a value of users context here.

With that you're telling React hey this component

should have access to the user's context context,

but you can only set the static context type property

once so if there are two contexts which should be

connected to one at the same component, this would simply

not be an option, you would have to find some other

work around like wrapping it in a number component

or anything like that.

With that said however, you can then simply access

this context users in this case,

in all the places where you need access to the users.

And with that, it will again work as before as you can

tell but now with context.

So it is all quite straightforward to use but a bit less

flexible than in the functional component world.

Of course you will not always need more than one context

per component, often one context is enough but if you do

need more contexts connected to one component,

then this restriction can of course hurt.