Context API Tutorial For Beginners - Using React Hooks

hey guys how's it going i'm back here with another video and today i decided to bring a beginner video introducing the context api i'm going to go over how to create a context how to create global states a bit about state management in react so this will be just a beginner video and honestly since context api in my opinion is a topic that a lot of beginners are afraid of of learning and it just is there's the stigma behind it and i i just think it is a very simple topic once you understand it and i'll try my best just to explain it in the quickest time possible so you can see here i have a very simple application it's nothing literally it's just a form where i can put a username for example pedro 5280 um that's my username i put a password the password doesn't do anything but when i click login you can see my username appears over here because it's almost like i logged into the application and now the application knows that i have that the user that is logged in has a username pedro 5280 however to build this you can see i have this small react application here very simple i'll even zoom in so you guys can see in my app.js i just have a login component and let me erase this i just have a login component which comes from here i have this login component over here and in the login also very simple i just have two states username and show profile and what happens is i have an input where i just set username whenever i write on that input i have the password which again i'm not doing anything to it i have a button which basically uh when i click on it it says set show profile and show profile will just if it is true it will show the username if it is false it won't so basically what we're doing here is we're setting the username and at the end we're just like showing it when we click on login so that's basically it for this application but so how can we incorporate context api into this project well very simply we can actually not write all this logic in the same place because for example imagine we want to have a how can i say a profile component right when i have a profile page for example we well how do we access the username state that we have here how do we actually have access to this because we might want to display our username in the profile well i'm going to show you guys how to do that let me create a profile file over here profile.js a profile component and i'll use the es7 snippet to just say rfce and it will just open up everything if you don't know what this is it is the es7 snippet and vs code i have a video on my best vs code extensions if you guys want to check it out i talk about this but basically i just created a component called profile right and i'll delete this i'll delete this as well the only thing i want in this profile is just like an h1 saying profile and i don't know like an h 2 saying username and i want to display the username over here but how do i access the user that is logged in right how do i do that well we can create a context to both of these components pass variables through that context so i'm going to set up the project to accept that the first thing i'm going to do is i'm going to come over here and remember that the state show profile let's imagine i want to have it over here in our app.js over here at the top i have it like this i'll even just import use state as well up here imagine i want to have show profile here at the top right and the only thing i want to do is basically i want to ask well if show profile is true then i want to render the um profile component which is j which just was imported right now else if show profile is not true so i don't want to see the profile let's just show the login component very simple logic right here i'm just showing the profile if it is logged in and if it is not i won't i will show the login you can see that if we refresh the page it is currently uh true so let's like it's because we need to save all of this um i'll save this as well let's refresh you'll see set show profile isn't true because we are still using this over here i'll just delete this right now um right here and okay i'll delete this as well um just to show you guys the example right so this should be the the project right yeah it's working out so basically we have this right here and we now want to pass the same state between both of these components so how do we actually do that well what we can do is we can come over here and create a folder called context and i usually like to create either a helpers folder or a context folder you can call it whatever you want let's call it contexts and instead of here let me create the the you the login context so let's call it logincontext it's just a file a javascript file which inside of here we're going to create our context so in order to create it it's very simple we can just import the create context function from react and with this we can now create a context so it's a variable and let's give it a name um let's call it log in context like the name of the file so log in context and we're exporting it because we're going to access it in a different file so we're going to create this this variable and set it equal to create context and i usually just pass an empty object here at the end you can pass an empty string this literally doesn't matter like in the beginning just focus on just realize that this over here should create the context and then what we can do is we can import this context in our parent component so for example we want to have a state that is accessible between the components login and profile so we got to think well which one is the parent component of both of these components well in this case it's app.js because we're rendering both profile and login in our app.js so in our app.js we're going to come over here and say import from dot slash um contexts slash login context so we're going to grab the login context from here and now what we can do is we can we can use this as a wrapper around our different components so what do i mean by that well you can see that around our profile our login we can come over here and say login context and i'll just close this right here and i know it doesn't look perfect right now but i'll show you guys what this means basically what you want to do is you just want to wrap around the two components that you have uh with the the login context so it's a component which you want to render it like wrap both of these components uh put them between the login context and something that is important is you gotta pass a provider so to do that we can just say dot provider and we're gonna put this over here as well login context provider and basically what this means is we're just going to pass this and turn this into a provider and we can pass certain values over here that are going to represent um that are going to represent the states that we want to share so the idea is over here we're going to pass an object instead of this value property we're going to pass an object inside of here which is going to contain all the different states that we want to share between these two components and well that means that we actually won't create the username state inside of the login we create all the states that we want to share on the higher order component so the parent component we're going to create this over here so we're creating both show profile and username over here and now we can pass to value the username over here and also set username why do we pass this well basically remember we want to pass into this value property over here an object containing all the different things that we want to access in all the components that are inside of this login context provider so for example in our login we want to change the username so let's pass the set username so that we can access it over here and on the profile we want to access the username so i can like imagine i can just come over here and say username so we need both of this information that we need to pass both of the same information right so now that we have this how do we actually access either username or set username in one of the components well now it's is the part where the use context hook comes into place so in the login.js i want to access the set username right so to do that first i'll just import use context here at the top and i'll need also to import the login context like we did before because we have to have access to it so log in context uh from dot slash actually i need to put two dots slash context slash login context and now the only thing we need to do is we need to destructure the variables that we got from the login context so in this case we only want the set username so what i can do is i can come over here and say set cons sorry set username equal to use context and pass the login context what this means is i'm basically saying well i want to use i want to grab the login context and i want to grab the set username variable that we're passing through that context provider and now we can use this in this application and similarly we can copy this in our profile and by the way i'll just import also use context here and i'll put the this over here i need to copy this i'll paste it over here i need to import the login context i just imported both of them and now what i can do is i can do the same thing that i did over here but instead of importing set username i can import username which is the variable that we want and now we have access to that state and you might be wondering well does it automatically change well let's check so remember that when i click on this button oh for now actually i don't think we are yeah oh one thing that is important we also want to pass set show provider right so show provider will only just either render profile or login but in our login we want to have a button where we can click and change the value for show provider show profile so what we can do is again come over here and say set show profile we're just passing the variables over here are the functions either one of those so inside of here we also want to grab set show provider show profile sorry i'm saying this wrong with show set show profile and after the button is clicked i just want to shut set the show to i don't want to set show profile so set show profile equals to true and this is again underlying the the topic that i'm gonna that i'm explaining to you guys so let's try to see if it's working if i come over here and i put my username to pedro 5280 it is it should be changing the value for the username now put whatever password i want and when i click on this button this over here should disappear because we we changed the value for set show profile and now it should be showing the profile component which only has the profile like a header same profile and a header saying username so let's try that one two three and as you can see it works not only it updated like the the state from the parent component so in the login we we set set show profile but the variable for that the state for that is on the top it's on the parent not only did that but it also kept keep kept track of the username throughout all the siblings components so that's the idea the basic idea of the context api is you just create context providers you pass states from the parent to all the different siblings or all the different children's actually that you want to have access to that state and inside of them you can just use the use context hook to have access to the value to the values and to the functions that change those states so that's basically it i really hope you guys enjoyed this video if you have any questions please leave them down below because i'm not answering every single comment and please subscribe because i'm posting every single day and i would really appreciate it and i see you guys next time [Music]

Channel: PedroTech

Views: 23,970

Rating: 4.8834438 out of 5

Keywords: learn reactjs, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, pedrotech, traversy media, clever programmer, tech with tim, freecodecamp, context api, contextapi, state management in react, redux, react hooks, usecontext, createcontext, usecontext tutorial, context api react hooks, context api react, context api tutorial, web dev simplified, react hooks tutorial, state management, global states in react, react context

Id: sP7ANcTpJr8

Length: 12min 25sec (745 seconds)

Published: Wed Dec 16 2020