React Context & Hooks Tutorial #8 - Consuming Multiple Contexts

Key Takeaways

or rather than gangs so in this video I'd like to show you how to consume two different contexts inside a single component so I've shown you so far two separate ways to consume a context I've shown you this way where we say static context type is equal to whatever context that we want to use or we say consumer like this and then get the context object in this function so if we want to use two separate contexts inside a component how do we go about that because now we have two contexts we have the theme one and the earth one so if I wanted to do inside here for example I couldn't just say static context type is equal to earth context that's not going to work because then we have two static properties with the same name and it's just not going to work that so we have two options here what we could do is we could use one context this way using the context type property and then the other one is going to use the consumer tag down here or we can just use to consumer tags so we can nest one inside the other and that's the way I'm going to show you in this video so what I'm going to do is surround all of this right here with the auth context consumer so to do that I'm just going to go up here and say auth context and press Enter that's going to automatically import it for me then we want to use dot consumer like so and then I'm going to place this right at the end down here now remember this expects a function to go inside of it and that function is going to return some JSX so this function is also going to take in a context object I'm going to call this off context I'm not calling it context because we already have that down here and in fact I'm going to call this one theme context so we know which each one is so anyway inside this top function all we're going to do is return some JSX so I don't need to open up a function I'm just going to return the JSX inside these parentheses so the J a sex we want to return is all of this stuff right here so let me paste that in like so and just scoot this back up here so now we have access to two different contexts inside this component the auth one and the theme one now I'm just going to change this to theme context because we renamed that variable and now also I'm going to do a similar thing to destructure some information from earth context because remember we had this stuff right here is authenticated and also toggle auth we passed both of those into the value property so let me now do a bit of destructuring next to these ones to grab those I'll say Const and we want is authenticated and we also want toggle off I think that's why it was called let me just double check yet toggle off and toggle off so now we have access to both of those things are set it equal to off context to grab the properties from there and now down here we could do something with these things so for now underneath the h1 I'm going to do a div and inside I'm going to output whether the user is logged in or logged out now to do that I need to evaluate this which is a billion it's how the true or false so I use a ternary operator and to do that we'll say is authenticated which is going to be evaluated to true or false if it's true we'll say logged in and if it's false we'll say logged out okay so now if I save this and come over here then we should see we are logged out but if I inspect and then go to react what I'm going to do is come down here to the consumer and go up and in fact we need to go to the provider not the consumer and change the value to true so now we can see unlocked in and as we toggle this it's logging me in and out well it's not actually locking me in or out but it's changing what we display right here and everything else still works as well so the theme context is still working in this navbar as well so that's nice we've now consumed two different contexts in one single ponen now I want to do one more thing and that is to use this toggle or function when we click on this div so whatever we click over here on this thing I'd like it to toggle the authentication status so I'll say on click oops on click and set that equal to a function which is called toggle off and then I just need to save this and go over here and let's see if we click it now you can see it toggles the authentication status so there we go my friends that's how you consume two contexts in one single component now all of this was fine but it actually becomes much easier to do all of this when we use the context API in combination with react hooks and it means that we won't have to do all of this consumer stuff right here so for the next few videos I'm going to be talking about react hooks and how they work then eventually we'll be coming around full circle to use hooks with the context API which is going to make working with all of this kind of stuff so much easier