React Context API Tutorial For Beginners | useContext Hook | React State Management With Context API

hey what's going on guys welcome back to another video so in this video we will learn about a very important and a must know topic as a react developer and that is the context api we will see how we can use context api to manage the global state of our application and i will also show you some of the best practices that you can follow while using the context api in your application let me show you the demo so we have a very simple login form here and we have the header where you can see that on the right hand side we just have a welcome guest because right now we haven't logged in with any of the user and if i click on the submit then i have a validation on the login form and these validations are done with the help of the react hook form package and it is covered in one of my videos so you can find the link in the description or you can also click on the card above and jump to it directly so what happens if i type any of the user name and i will type some password and when i click on the submit then you will see that whatever the username i have typed i can see this username here as welcome the page and also you can see that we are now logged in as the page and although these two are very different components so this is a part of the header component and this is a part of a different component so we can pass the data in different components and all this is happening with the help of the context api so if i click on the logout then we are logged out and we can see again the welcome guest and we see the login form so let me type an another one and this time i'm going to give it the page malvia i will submit the form and we see again the page malware here and the page malvia here and if i click on the logout here then we will be logged out from our application and we will see the login form so if this sounds interesting then stick around also don't forget to subscribe the channel and press the bell icon so that you don't miss the videos like this one so let's get started [Music] all right guys i have an exciting news for all those who want to become a software developer or have just become a software developer an academy brings you a platform where you can get access to weekly shows which you can watch live some of the shows that are going live soon on an academy are hiring updates in startups and major tech companies you will see the eligibility criteria and how you can apply to these jobs how to approach a code chef problem replacement talks where hr from the top companies come and talk about their hiring process top 20 questions which are asked in the interviews and how to solve them accelerating development by using real life projects and life journey of fellow coders working in fan companies and many more shows like that you will also have an option to interact with industry leaders on the platform and get a chance to take part in an online mock interview to sharpen your skills and get real-time feedbacks you get all this and much more for a nominal fee of rupees triple nine for the entire year and with my code an academy you get a ten percent instant discount and you just pay rupees eight triple nine want to make sure your college projects tricks all the boxes want to make a project that helps you to get top internship get a chance to get your college projects reviewed by one of the india's top youtuber striver he will help you in understanding what things went right what mistakes were made and how to correct them let me show you a quick demo of how you can get the subscription so you will find the an academy career as a software developer page link in the description once you click on the link you will end to this page where you will see a get subscription button you just need to click on this button and you will lend to this page where you can add the coupon code so our coupon code is the page01 and if i apply it you will see that we get a 10 instant discount now let me show you some of the courses that have already started on the udemy platform so if i scroll down then you will see that these are the top educators and these are some of the courses which are coming soon and these are the recently started courses so if i click on the see also we will be able to see all the courses that have already started like the learn and grow interview preparations and many more and one of the interesting course is the learn and grow where raju vikramaditya is going to explain us everything about the project and how we should make the project and the review of the project which we saw previously and lastly you can check this weekly course schedule along with date and time so that you can plan accordingly and don't miss this golden opportunity you will find all the links related to the unacademy platform in the description below with the discount code that you can use for subscription all right guys so i have already bootstrapped my react application and i have removed all the unwanted files that i don't want for this video and i have created few components so i will give you a quick walkthrough so that you can have a good understanding of what the project i have at the moment so the first thing is we have the app.js and inside the app.js i have two components which is a header component and a auth component so let's go to the container folder and inside the container folder i have the header.js all right so this is my header component and inside the header component i have an h2 and i have an h3 tag which shows the welcome and the user so right now the user value is the guest so if i show you here then you can see that this is our h2 tag and this is our welcome guest and this is our header then we have the auth component so inside the auth component let's go to the auth component and here i have just created a simple flag so if it is true then i want to show the login form component and if this value is false then i'm going to show the home component so right now it is true so that's why we see the login form and if i make this as false then i will be able to see the home component which shows that you are now logged in as a user name so this is a very simple stuff so i'm going to change this back to true all right and now let's go to the login form so in my login form you will see that so this is the same form which we built in one of our previous video where we discuss about how to handle and validate form in react.js using a package called react hook form so if you have missed that video then you can just click on the card above or you can find the link in the description below all right and then in the home component i simply have a simple h3 which shows some of the text so that's all the simple thing i have now let's start building the application with the help of the context api so what i will do is first i'm going to create a new folder in the source and the name of the folder will be context so this is how you will create a context folder in your project and where you will keep all your contacts that you are creating for your application all right and now inside this context i'm going to create a file which will be our user context so that will be a user context dot js and if we want to create a context we need to import create context so let's import a create context so i'm going to write here as create context and this will be coming from the react so i'm going to import it all right and to create the context we just write a user context so let me add the user context and this is equals to the create context so i'm going to write the create context and inside this create context what we will do we are going to pass the initial state so the initial state is the object all right and i'm going to set three properties in my object so the first property will be the user name and the username i'm going to pass it as null and the second property i want to use is the login and the logout so i will have a login function so let me create a login this login is a simple arrow function and we are not writing the definition of this login form we are going to write it definition later on and then i'm going to have a log out so let me create a logout function all right so now we have created the context and this is how you are going to create the context for your application and now if you want to use this context what we can do is actually going to write here and export all right now we have exported this and now we can go in our app.js and we can use this context so let me import the user context from from context so i'm going to write the context and this will be the user context all right so now we have imported the user context and if we now want to pass the value of this user context in our child components then we can use it here as so i'm going to go here and i'm going to write it as user context dot provider all right and this provider can take the child elements and we are getting an error that this is not a default export so i'm just going to add the braces here all right so this is how we will provide the user context provider and if we go to our application everything is still working nothing is break so everything is fine and if you want to pass some values to your child components you can actually add a value here and this value can take the object but we are not going to take this approach and we are going to do it a more cleaner way so what i will do i will go to my user context and here i'm going to create a function so let me create a function so i'm going to export this function and this function is the user context provider so i'm going to write this user context provider and this is going to take the children's so let me add the children all right and this is simply going to return the user context provider so what i will do i will go here and i'm going to cut this part from here and i will add this part here all right and inside this we are going to pass the children so whatever the children's are so i'm going to write the children here all right and now we can simply use this here so i'm going to import it here and we can simply provide this so let me add the user context provider and i'm going to remove this and we are going to cut this and we are going to add it here all right so this is more neat and clean way of using the context provider so now all our logic and everything is residing in our user context to keep the code of the app.js very neat and clean and next what i'm going to do is i'm going to make use of a use state and i'm going to create a state variable here so let me add a user and i'm going to add a set user and this will be equal to the use state all right and i need to give an initial value for the state so what i will do i'm going to create a initial state here so i'm going to write a constant and initial state will be so this is going to be an object and i will write the name so the name of the object will be as guest and what i want the other field is i will have a flag that will be east guest so i'm going to write a guest user and i'm going to set the value as true all right and this is going to be initial state so i'm going to pass the initial state like this now the thing is i want to consume this user in my header component so this is my header component let's go to the header component and i want to consume this user value which is the guest and i want to have it in my header so that i can add the guest here and not the hard coded value so how we can use that so we know that if we want to consume the context api in a function component we can make use of a hook called use context and if you don't know about the used context then i have a complete video on it you can click on the card above and jump to it directly but i'm not going to write the use context in the header itself what i will do i will go and create a function so i'm going to write an export here and this export function and i'm going to use a use user context so i'm creating like a custom hook and which can be used so what i will do here this is going to have the user and this will have the login and this will have the log out and all these can be consumed with the help of a used context so i'm going to write a use context here all right and now what happens whenever i use this function this function has to return me all these values so i'm going to write a return here and what it will return it will return all these three fills all right and now we can use this function in any of the functional component in order to access the values of the context api so let's go to the header and inside the header i'm going to write a constant and this constant will be give me the user so i want to consume the user and i'm going to write here as use user context all right and if i do a simple console.log then let's see what we get in this user all right let's save it and let's go here and it says that you state okay so we made a small mistake and what is that mistake is this should be a capital all right so we have this context provider and let's go to our app.js and inside the app.js we are going to change this to a capital all right let's save it and we are still getting an error because we did not pass the context here so whenever we use the use context we need to pass the context as well so here our context is the user context so let me copy this and let me add it here user context all right i will save it and if i go to the localhost then we can see that we don't get any errors and if i go to the inspect then if i go to the console and we see that our value is undefined so the user which we are using here is undefined and that is because we have forget to pass the value in the provider we are trying to consume a value but we are not providing that value so if i go to the user context then you will see that we have the value but we are not providing any value here so we need to provide a user here all right and now if i save it and if we go to our header we will just remove this for now otherwise we are going to get into an error and if i save it then we will see that we can only see the welcome and if i go to the inspect element then inside the inspect element if we go to the console we can see that we have a header and we have an object and we get the name here so we can use this name to display here so here what we are going to do we are going to have the user dot name and this is going to give us the guest so we have done this part and what we need to do next is we need to add the values and then we need to submit the form so if i submit the form so let's go to our login form so this is our login form and inside this login form when we click on the submit so this is where we click on the submit so on submit we need to have a login functionality so let's go to our user context and inside this user context what i will do i'm going to write the definition of my login and log out function so let's write the definition for the login first so i'm going to write a function and this function is going to be a login function all right and what we will do whenever a user is trying to submit the form we need to set this user so i'm going to copy this and i'm going to set this user and this user will have the ease guest user as false all right and we need to have the name so i'm going to add the name here and the value of the name is whatever the value we fill in our input box so this will take a username and i'm going to copy this and i'm going to add it here all right and similarly for the logout function what we need to do is whenever we try to log out and in that case we are not passing anything and we just need to set the user to our initial state and the initial state was the user so i'm going to copy this and i'm going to add it here all right now in order my login form to use this login function and the logout function i need to provide these functions so this is our provider and let's add the login and let's add the logout all right so we have the login and the logout the next thing we will do is that whenever we submit the form we should be able to login so let's go to the login form so this is our login form and this is the data where we actually get the data what we have filled in the form so what i will do here is first i'm going to take the reference of my login form so i will have a login and this will be equals to the use user context all right so if you have forget that we have a use user context and this exposes the user the login and the logout function so that's why i'm able to access the login here and when we have the login what i will do i'm going to copy this login and i will pass the data dot username and if you want to see that what is inside the data then let me show you what is inside the data so let's go here let's go to the inspect element let's go to the console i'm going to clear the console i'm going to add the page and i'm going to write test and if i click on the submit then you will see that the form has to fill the username as the page and password as test so we are passing this username to the login function and when it comes to this function what it takes it takes the username and it sets the username here and it also said the is guest as false as soon as it says the username here our header will try to access the user and it's going to give the user.name so that is why we are able to see the page here but let's add the log out button as well here so what i will do i'm going to write a condition here and this condition will be that our username dot is guest user all right and if it's true then i need to have a button and the button will be having a class name as ui button blue all right and i'm going to write here as log out and i will save it all right as soon as i save it you will see that now we have a logout button but when i click it nothing is going to happen so let's add the on click here so i'm going to write a on click and this all click will actually going to call our logout of the use context so we have already provided the value let's consume the values so i want to consume my logout so i'm going to add the log out here and just going to copy and just going to add the logout here and that's all so if i save it then now if i click on the logout you will see that it gets the guest back and if i submit it it will give me the page and the log out if i click on the logout it give me the guest back but what happens is i also want that when i click on this submit i want to change this component as well so for that let's go to our auth component so inside the auth component we have this condition so we are not going to give any hard-coded value of the condition and what we will do i need to access the user in my this function component so we can access the user as constant and this is going to have a user this will be equals to our use user context all right so what i will do is i'm going to add a user dot is guest user if this is true then that means it's a guest user we need to show a login form if it is fall then we need to show the home form all right and that's it if i go to our component then we can see that if i refresh my page and let me test it so i'm going to test and test if i click on login i see the test i see the log logout button but here i still see the username so we need to update the home so now let's go to the home and you can see that we have created one context at one place but now we are able to access the values of the username the logout login function in any of the component which are the child components of this user context so this is also a child component of the user context and i can access it here as well so i'm going to write constant i need to access the user which will be equals to the use user context all right and here i'm going to simply going to add the user dot the name of the user all right and i also want to have the logout functionality here so for that we can simply copy paste the value which we have it in the header so i'm going to just do a copy paste of this i'm going to copy this and i'm going to add this here all right but i don't have a log out so i need to get the log out as well so let me add the log out all right and now we should be able to see everything so if i refresh my page if i write test here i'm going to write test here i submit it i see a welcome test you are logged in as test and you see a logout button at both the places if i click on the logout i will be able to log out let's try another thing i'm going to add nikesh and i'm going to add nikesh if i click on submit i should be able to see this so what we have done is we created a one context file which is are related to our user session and we have provided the value from this user context to its child elements so now all the child elements will be able to access the values which are provided by the user context and that is what we are doing it so if we go to our app.js we have a provider inside the provider we have the header and we have the auth and this auth is also having a two different components inside it so if we go it then we can see we have a login and we have a form so we don't need to do the prop drilling we don't need to pass different props to the nested level of the component these all can be solved with the help of the context api so that's all i have in this video i hope you understood the context api now very well and it's one of the best practice you can do while using the context api you do everything whatever i have mentioned in this user context you have the provider as well and you have the consumer as well the way you consume the context data in the components so this is how you will consume it and this is how you are going to provide the value to your child components so i hope you like the video a thumbs up is appreciated you can also connect with me via facebook or instagram you can follow me on twitter for latest updates and before you go don't forget subscribe the channel and press the bell icon that you don't miss the videos like this one i will also add the github link for this code in the description below so that you can of downl thank you thanks for watching

Channel: Dipesh Malvia

Views: 19,023

Keywords: react hooks, context api, react context, learn react hooks, react hooks tutorial, react, react context api, usecontext react hooks, api react, state management in react js, state management in react, global states in react, usecontext tutorial, context api react hooks, context api tutorial, Learn react contextapi, create context react js, learn usecontext in 10 minutes, react context function, javascript tutorial, react js usecontext tutorial

Id: zHYkA1AycPs

Length: 23min 51sec (1431 seconds)

Published: Thu Aug 19 2021