React Context & Hooks Tutorial #7 - Creating Multiple Contexts

Key Takeaways

okay then gank so we've seen how to create a single context to store some kind of data in this case about a theme and then use that data in different components which can consume this context right so we did that using this provider right here and passing in this value but what if we want some different kind of data for example if we had some authentication data for the currently logged in user now would we put it in the same context well no that's not a good idea because this is for the theme and it doesn't make sense to put some kind of authentication stuff inside this context what we can do is just create multiple different contexts so if we have some kind of data that is for one part of our application we could create a context for that if we have some other kind of data which is going to be global for another part of the application we could just create another context for that so let's go ahead and do that we'll create a new file called auth context is and inside here again we're going to import react and also component so let me do that snippet and we also need to import create context because that's the function we need to create the context then down here we'll say export Const and we'll call this off context and set it equal to create context so we're just going to be following the same pattern as we did do for this thing over here theme context so down here now let's do a class component so CC and then this is going to be called auth context provider we will have some state and that state is just going to hold maybe a simple boolean called is authenticated so I'm going to keep this really simple because I don't need to demonstrate how to use authentication in this series it's about using the context and this video is about using multiple contexts so I'm going to keep this as simple as possible just to show you how we can use two different contexts in our application so anyway let me set this to false to begin with and I'd also like to create a function now so that we can toggle this in the future if we want to so we'll call this toggle off and set it equal to an error function inside the arrow function we want to say this set state and the thing that we want to set is this property right here is authenticated so let's grab that and we want to change it to the reverse of whatever is now so exclamation mark then this dot state and then dot is authenticated so if it's false it's going to turn it to true and vice versa so that's this pretty much done over here the next thing we need to do is return some JSX and again this is going to be very similar to this thing over here where we have the provider then we have a value that we pass into that that's the data or functions we want to share and then we nest this dot props on which other components we want to provide this state or function to so let's go over here and do something similar this time we want the off context dot provider like so and in here we need allow you property and that is going to be equal to an object we use spread syntax to get this state and we also want to pass down a property called toggle auth which is going to be equal to this toggle off so this function right here then finally we just need to nest this dot props children like so so that is this context file pretty much done now the next thing we need to do is take this and we need to nest it inside our app dot J's file so that it surrounds the components that we want to use this context in so let's go ahead now to a pas to do this and we need to wrap these components with that new off context provider because these are the components that want to use that data or that function so we could nest the earth context provider inside the theme concepts provider like this or we could put it outside of it like this it really doesn't matter in this case they are both still wrapping these components so I'm going to put it inside so let me say auth context provider that's going to auto import it for me up there and now I need to take this closing tag and put it at the bottom over here and just scoot these in a little bit like that okay so now we have both of these context providers surrounding or wrapping these components so now these components should have access to both different contexts so if I save this at the minute and go to the browser over here then I'm going to open up the reactor tab and by the way Vista works so adding in this earth context provided inside themed content provider has not affected how this works this still works exactly the same now if we open this up we can see the first contact provider for the theme and then we have the second content provider inside for the authentication so if we see my soap we can see inside the value as well is authenticated true or false so now hopefully we can go ahead and start to consume that second context the auth context inside these components as well so the next step is to figure out how to consume multiple contexts in one component because for example inside the navbar over here we might want to consume not only the theme context but also the earth context and I'm going to show you how to do that how to consume multiple contexts in one component in the next video