Check out a free preview of the full Complete Intro to React, v5 course:
The "Context with Classes" Lesson is part of the full, Complete Intro to React, v5 course featured in this preview video. Here's what you'd learn in this lesson:

Brian demonstrates how to provide a global CSS style to a button in a class component.

Get Unlimited Access Now

Transcript from the "Context with Classes" Lesson

[00:00:00]
>> Brian Holt: So let's go put it in details.js.
>> Brian Holt: So details is what? A class, so I can't use any hooks in here, which is unfun. So what we're gonna do here is we're gonna say import ThemeContext from./ThemeContext.
>> Brian Holt: And unfortunately, it's a lot weirder to use context with classes.

[00:00:38] So, what I'm gonna do here where the button is, we have to do ThemeContext.Consumer.
>> Brian Holt: And then inside of this, you're provided a function.
>> Brian Holt: So inside of this, I get a function here with the theme back. And then here I can use this theme to, I can read from the theme.

[00:01:12] So let's put themeHook.
>> Brian Holt: And then here I can just move my button up into this.
>> Brian Holt: And I can say style=backgroundColour themeHook(0), right? Because it provides you both the set, or the theme and the set theme.
>> Brian Holt: So keep in mind, any function that just returns markup is a React component, right?

[00:02:09] So we're just basically creating a smaller React component inside of the theme provider. Or sorry the theme consumer, which is reading that off of the context. So it's kind of an odd pattern, but that's how it works. Does that make sense? Now, it's weird to read this themeHook(0) like this.

[00:02:29] So we could actually make this even simpler if we just did this, so,
>> Brian Holt: So what did I do here? I destructured this right. Now I'm pulling the theme out of the array.
>> Brian Holt: But you could leave it with the themeHook(0), I'm fine with that.
>> Brian Holt: Make sense?

[00:03:08]
>> Brian Holt: So if we go over here now to the details page.
>> Brian Holt: So notice that they're on different pages now but they're both dark blue backgrounds right and they're both reading from context.
>> Brian Holt: And if you go change that. So if I go into the app.js and say.

[00:03:32] Yeah, this shouldn't be dark blue anymore, this should be peru, it's my favorite CSS name color. That's the color of Peru. I don't know if you knew that but that's what it is.
>> Brian Holt: But notice it updates the entire application.
>> Brian Holt: Make sense? Yeah, Mark?
>> Speaker 2: Could we pass multiple hooks to the context?

[00:04:08]
>> Brian Holt: At that point, you wouldn't wanna use a
>> Brian Holt: You would just give it an object, right? You wouldn't give it multiple hooks, you would give it just an object, right? So rather than here, this is just a string right now. And probably what I would do is I would just say object.

[00:04:27] And I would have buttonColor darkblue and maybe like, I don't know, modalColor. Do modals have colors? I don't know. And they're pink, because this is a well-designed application. Okay, and then now I would have this and so I would come into the details here. And that would be theme.buttonColor, right?

[00:04:59] So you would use an object instead of just a string.
>> Brian Holt: But again, just remember that I can give anything to use context, right? So if I go back to app.js,
>> Brian Holt: Instead of having themeHook be a hook here, I can actually just give it an object and that object would have a bunch of stuff in it, right?

[00:05:29] So it doesn't have to be a hook. Hooks in context are not [LAUGH] hooked together, right? They're totally separate concepts. I happen to be using them here together because they work together nicely.