React Context & Hooks Tutorial #4 - Accessing Context (part 1)

Key Takeaways

southern Ganga now we have our theme context file over here and we have our theme context provider which is wrapping these other two components right here so we want to consume that context from these two components now ie access the data that we pass in to this provider and we do that remember right here so how do we access this data from this context in these different components now well there's a couple of different ways we can do this inside a class component and the way that we're going to look at in this video is by using something called the context type so this way can be used in a class component but not in functional components and that's okay for now because we're using class components right here so let's go into navbar first of all and the way we use this is by saying static and it needs to be called context type like that and we set it equal to whatever context that we want to consume inside this component so we want to consume the theme context so press Enter it's going to automatically import that for me at the top so remember this is the theme context not the theme context provider the theme context itself and there is a difference this is the theme context we create and this is the provider right here which provides the context so we're saying that the context type of this component that we want to use is the theme context right here and what this does is now look up the component tree - the first time it finds a provider for this context and if it goes one level above this component is going to come to a PS and it's going to find that theme context provider right there and then it's going to have access to the data provided by this that we put into the value property right here so what it does is take all of this data that we pass in to the value property and it attaches it to a context property inside this component now so I could say for example inside the render method that I want to console dot log this to reference this component dot context so that should hopefully be equal now to this thing over here that we pass through into the value so if we go over here and look in the console we can see this data right here so this is what we log it out and it's exactly at the data that we pass through into that provided so that's good now we have access to all of this shared data inside this navbar component and that was dead simple all we have to do is say static context type is equal to theme context and import that up here and now we have access to all that data on this dot context so what I'm going to do now is just a bit of destructuring to get some different properties from this context because we have these three properties dark is light theme and lights and I want to store all of those in separate constants so I'll say Const and then destructuring so curly braces then we want the properties is light theme we also want light that was a property and dark so we're getting all of those properties now from this dot context okay so this is just D structuring all we're doing is getting these properties from this context object and we're storing them in variable names that are the same as these things so we have access to these three variables now all constants so the first thing I want to do is figure out if we're going to use the light theme or the dark theme inside this component now we can figure that out by evaluating this thing right here because that's the boolean remember it's true to begin with but it could be false so I want to figure out what this is if it's true then I'm going to say well okay the theme is the light theme that we're going to use so I'll use these colors if this is false now I'll say ok well we're using the dark theme and I'll use these colors so we use a ternary operator to decide this I'll say Const and we'll call this theme and that's going to represent what theme we're currently using and I'll set it equal to is light theme this is what we're going to evaluate question mark now if this is true then it's going to return the first value over here in which case we want it to use the light theme then we say a colon if this evaluates to false then it's going to return the second value on the right side of the colon and that is going to be the dark theme so now if this is true then theme will equal two lights if this is false then theme will equal to dark so now we have those different properties stored in this constant and then we can just output those inside this component right here so what do I want to do well I want to style the navbar first of all so let's do a style property and we're gonna do some bindings of curly braces and this takes an object and a different key value pairs so the first thing I want to style is the background and that is going to be the theme which is right here and we want the UI property on it dot UI because remember these have the UI property the BG property and the syntax property so we're just using these different properties now for our CSS in these different elements right here so that's the background color of the nav and then I also want to color the text so this will be the theme dot syntax so now we're colorizing this nav right here and pretty much that's all we need to do for this component so let me save this now and check it out in a browser come over here and now we can see it's colorized our app according to the theme that we currently have and remember if we're going to react tools over here and we open this up then go to the context provider we can see in here that is light is true so that means we're using the light theme but if I uncheck this it's going to change to use the dark theme okay so that's pretty cool right we can dynamically change this now and we'll add a button later on so that a user can do this without going into react tools because not every user is going to have that so that is the navbar door now let's do a similar thing inside this component right here so let's go now to book list and we want to do the same thing we say static and context type is equal to phim context so hit enter to automatically import that then we want to do a bit of D structure and again so inside the render method we'll say Const and we want to grab again is light theme the light theme and the dark theme and we get all of those from this dot context so again we need to say Const theme is equal to is light theme if this is true we want to return the first value which is going to be the light theme if not we'll return the dark theme so same as we did in the other component we're just working out what theme are currently aren't based on this boolean and we're storing that now inside theme so we can output it and the styles using that theme in the template so I'm going to do that over here I'm going to say style is equal to and then we want to ups we don't need those quotations just to lots of curly braces and inside we'll say color is theme dot syntax and the second property is going to be the background and that is going to be theme dot BG so I also want to do something similar for these Li tags right here so I'm just going to alt click all of these to do them all at once and I'll say style is equal to and then we want to use the background property and set it equal to theme dot UI okay so now we're colorizing this component as well so if we save that we should see that update in the browser cool so we're currently on the light theme if we now change this to the dark theme if I just expand this let me zoom this up you change this to false then it should change the theme over here and that's happening remember because of this ternary operator and every time this data changes in the context so every time if we go back to this every time the state changes then anything that's consumed in the context theme context and takes in that value that is going to update with the new value as well and because that updates over here in the book list and also in navbar then this is going to update right so when this updates from true to false this right here this ternary operator returns something different when it's true it returns the lighter theme and we output those colors and when it's false then it returns the dark into theme and we have put those colors all right so that's a nice little way now to take data from our context and then do something with it in our different components okay so that's one of consuming context in a components in the next video I'm also going to show you another way to do this