React State Management Tutorial | Context Api | React Tutorial For Beginners

hello everybody in this episode we are gonna go deeper doesn't sound good dive deeper into some react some more complex topics like state management so if you've never really done anything like this before then I think it's gonna improve you and make you a way better developer and you can create some more and more complex applications with this so stay tuned and let's get going okay let's get started and as you can see I don't have the background anymore with the circle I'm fully integrated into vs code let me know what you think below of this new setup I got going here I really like it I can point to things it's nice I love it so let's let's start the thing I have here is just a normal create react app project it's empty I just installed it if you want to follow along all you have to do is go to terminal up here and click new terminal this is gonna pop up and then all you have to do is say MPX create react app like so with the dash in between at the - a line - line line and then you can give it a name so we can say state management or something like that I have mine installed here already so we don't have to do any of this and let's just quickly set something up here I'm gonna delete the files that we don't need I'm gonna get rid of the SVG here I'm gonna get rid of the AB GS test file let me mute the sound let's also get rid of the what else here I think that's gonna be that's gonna be fine okay here in FG yes I'm gonna get rid of the SVG up here and also get rid of everything in the app here I'll just leave an empty div with a class name of app now to understand state better I'm gonna show you the problems first and I'm gonna show you the difficulty that you might face and then we're gonna take a look on how we can fix it okay so the first thing let's say I'm building a movie app or something that I have a movie list and I want to display all the movies and I also want to have like a navigation maybe with my name a dashboard kind of thing and it also says the list of movies I have okay so let's let's kind of create a component with the movie list so I'm gonna go to source here I'm gonna click new I'm gonna see movie list dot J s just like that now here I can say import react from react and we're gonna do this to almost all the components we're gonna export something that I'm gonna create right now movie list and this is gonna be export default like why is this not working there we go export default movie list and here you would create the components so we're gonna say Const movie list is equal to a function okay and this is gonna return some JSX in here perfect so we need a state now if you think about it where would the state fit so I want to have a list of movies in my States now it doesn't really make any sense to put it into the app component because it doesn't really have to do anything with it but the movie list is a good candidate for that so let's import you state here so I'm gonna add a comma and I'm gonna say use state like this in curly braces and up here before the return we can create that state now I have a list of state here already pre-made just so this doesn't take so much time and all of this is basically a list of movies so let's take a look at this we have a Const some movies and set movies here which is gonna be equal to you state and this is just gonna be an array of objects so we have an object here with Harry Potter with the price and an ID we also have another one Game of Thrones ten bucks and IB and Inception here okay so that's all that we have here eventually what I want to do is just take out this state and I'll put it here so I'm gonna map through this each and every object and I'm gonna output it to the screen so we can add some curly braces and I can say movies because that's the list I want to go through dot map and all we have to do in the parentheses here is just add movie so that's a single movie and we can add an arrow function here and I'm not gonna add curly braces I'm just gonna add some parentheses which basically is going to mean that we can return something here and for now let's just return a an ally of I'm gonna have curly braces again of movie dot and let's say we wanna output the name so movie name okay hit save and let's actually take a look at this I'm gonna start NPM start in the terminal and that's not gonna work because we need to import it in our app here I'm gonna import the movie list from dot slash movie list okay and I'm gonna render it down here movie list like so hit save let's take a look hopefully this works and this actually gives me an error because we have to make sure that we wrap this output here and to a div or something so div pro tip that we cannot do is we cannot return multiple child children okay we have to have one main div around something because JSX is not gonna let us to do that so all I'm gonna do is just wrap this into another div like so and that's gonna work just fine I'm not sure what this is I'm going to leave it there we go and now if we take a look we have Harry Potter game of thrones and inception now I don't want this to be an ally so what we can do again is just make a component that's specific to a movie so we can output movie name the price and things like that so for that I'm just gonna quickly make another one movie dot J s I'm gonna quickly copy everything from here movie list paste it in here and I'm just gonna delete the state we don't need the state here and you state I'm not gonna need it and I'm just gonna change the name to you movie and down here also to movie okay we're not gonna map over anything here but I'm gonna output the h3 with the movie so how can we we learned how we can pass down information from the movie list so from up here down into this movie and the way we do that is well first we import the thing that we need in here so I movie in here so let's import it import movie from dot slash movie like that and rather than outputting an ally I'm gonna output the movie okay hit save and now we're gonna get some errors but that's fine and now the thing we need to do is we need to pass down the information from here to here so the way we can do that is improv so we can go down here into the movies and we can say movie and let's say name we want to pass down the prop called name we can set it equal to MU V dot name okay which is basically this movie name alright hit save and hit save here I think that's why I gave me an error and the way we can pass down the movie name from here to here is with props so we can say props here and then n bh3 we can just say props dot name hit save let's take a look and we should get the same kind of output here now we can shorten this by not seeing props we can just pull out the name and we can get rid of this it's saved that should still work and it doesn't worry because we need to wrap this with parentheses like so it's safe let's take a look okay that works and now let's also add the price down here so we can say hitch and then let's add ap tag here price so again to pass it down all we have to do is go back here to the movie list say price equals movie price perfect hit save and down here now we have available the price so we can say price and we can output it in this P tank and here we go everything works that's fine so hopefully you're comfortable with this so far and the next thing I want to do we're gonna get this ugly error here that's gonna say a child and the list should have a unique key so to get rid of that all we have to do is in here to say key and I'm gonna set this equal to mu V dot ID so this one down here and that's gonna get rid of that ugly error message okay so we kinda see what come on out here and everything is fine everything works perfectly but let's say I want to create a nav component okay and in that nav component I want to show my name and the list of movies I have take a look at this I'm gonna go to new and then create a nav a s alright I'm gonna go to the movies just copy the import statements and everything to this nav I'm gonna change this to nav I'm gonna get rid of everything here I don't need anything there we go and for return I'm just gonna return let's say my name so dev ad and ap tag with the list of movies and gonna add a double dot and this is gonna be the number here how many movies I have in my list so for now it's gonna be empty and I'm gonna replace this with nav all right so I want my nav to show up in here so I'm gonna import nav from nav like so and I'm gonna render it in this app component so I'm gonna say nav like so hopefully everything should still work there we go and I'm also gonna style this a bit to make it look more like an F because doesn't look like in that finally here is where we are facing our issues in a BAS I'm rendering the nav and you move your list okay these two should be separate okay they have nothing to do with each other but in this case I do want to render the number of items I have in the movie list and Deneb and I cannot do that because the only way you can do that is by passing it down through props so AB can pass things down to this and this if it has a state so in this case we only have stayed in movie list so the only way I can pass this down to another component is by props like this I can just make another component like this put it in here and I can pass down the information maybe from the state down here and props and now it's available in the movies so here in the props and in here okay so the only way we could get this to work is to render the nav here so I would render it nav in here and then maybe press down pass down the prop like amount of books or something like that is gonna be equal to which is gonna be movies dot name dot length or something like that right that's gonna give us the number but I don't want to render the nav here it makes no sense to have the nav in my movie list component so how can we fix this well one way to fix this is something called lifting up the state which sounds super fancy but it's not fancy and the logic behind that is we can take all the state from here cut it and move it up to our parent component so we would render the state up here and this way now we can pass down the movies to our nav and our movie list so we can pass it down to any component we want the problem with this is that we're gonna have a lot of state in our app component that doesn't belong to the app component so you might have inputs here set movies buying cards this works but it's gonna it's gonna be a bit difficult because if we also want to pass down props we're gonna have to prop drill which basically means we have to pass down props from component to component to component so in this case now if I want to pass down the movies all the way to the movie we would have to do this we would take the movies here pass it down to the movie list then we have access to the movie list and the props so here we will have the movies and then render the movies here and then pass it down again in props and render it here so we had we would have to keep passing the props over and over and over again until it arrives to the specific component we want and edie my head is gonna blow up tell us how we can make this super simple okay so let's go back here let's get rid of this function app I'm not gonna add the step in here we're gonna keep this simple here I'm gonna pass everything back up so the way we were in the first place so the way we can fix this issue is with state management and we have actually something baked in straight into react which is called context now we're gonna cover redux a bit later but I think once you pick up context Redux is gonna be way easier so that's why I kind of want to cover this in the first place so the way this works is rather than adding the state in this movie list we can separate that logic that information and creating a context components a movie list context and then with that context we can pass it down to whichever component we want without going through props and things like that and passing it down in here and in here and then it goes in here and okay so let's take a look how we can do that I'm gonna create a new file in our source directory and I'm gonna call this movie list context okay or just movie context to keep this simple dot j/s the thing I'm gonna do is I'm gonna import to react just like we normally do Const react from react Thanks so I'm gonna create a component Const I'm gonna name this movie provider I'm gonna explain everything in here in just a second I just create the component here like so and I'm gonna return something okay let's export this and actually I'm going to export this like so export up here and not default because we need to export two different things from from this component so we're saying good wait this is not okay import not Const import react from react and the thing I'm gonna do is I'm gonna move the state from our movie list in this movie context I'm gonna cut everything out from here and paste it in here alright so that's the first step we need to do the second step is to import you state because we're using you state in here so I'm gonna say curly braces use state now how can we create that context well we just say create context okay we add a comma create context now to initiate that constant context we need to do it above here so outside of this component now hang around with me this is a very key but it's gonna make and just a bit I promise so let's create a context and the way we can do that is we can say Const movie context okay I'm gonna give it the same title that we did up here movie context it's gonna be equal to and we're gonna use this create context I'm gonna add some parentheses because this is a function and I'm also gonna export this all right so we're exporting two different things this movie provider and this movie context and the way this is gonna work is whenever we want to use our movie context so whenever we want to use the information from this we just import this movie context so if I want to use it in here I import the movie context the movie provider is basically just gonna provide the information to the different components so this is just a one-time thing that we need to do is we need to wrap this movie provider around all the components that we want to give that ability to access that state so in the return here what I basically want is to render it out this movie context like so we're gonna say movie context you can close this and it's gonna say the lot provider all right same goes here dot provider well it's gonna do two times like that and in here basically what I want to do is render all the components in between and the way we can do that is rather than adding everything in here like nav and movie lists all right so basically this movie provider all it's doing is providing this information to these small components in here but rather than doing this nablus the movie lists we can get rid of everything in here and just save prop star children and what props that children is gonna do it's just gonna render all the child components whatever it's wrapped in between these okay so that's also I had props up here and now we can just import this movie provider in our app and wrap everything around it so I'm gonna say import movie provider from dot slash movie context and now since we're not exporting this default see we're exporting these both separately we need to make sure that we add curly braces around this this movie provider so here I'm just gonna wrap it in two curly braces and now all we have to do is just say movie provider and just wrap all the components that we want to pass that state down to and this movie provider boom there we go so now everything all the state from this movie provider is easily accessible in these components okay now to experiment with this and try it out let's go back to the movie context here we can actually pass down a value so for now we can just go here where we return the movie context that provider and we can just add a value and for this one I'm just gonna add a string that says hello perfect now we're gonna have some issues here because I don't think we are rendering the boovie list here anymore so if we save this it's gonna error out because movies is not defined right now this component has no idea where movies is so I'm just gonna comment this out for a second all right like so let's save now it should be good okay so let's take a look again here what we're doing we create a movie provider and a movie context this movie provider this movie providers job is to just hold some information and then pass it down to all the different components that we want to so that's why we added this props that children so we create this movie provider and we wrap our entire app around it and now everything in here has access to the all the information so all the information that is in this value we use the movie context here we're going to import this to actually use and the different components we want you alright that enough talkin show us how how how this is done so let's go back to our movie list and let's say I want to use that information so this hello this value let's take a look on how we can do this we can go up here we can import this movie context let's import movie context from movie context and now to consume this so we can have access to the value we can import from reacts on something called use context alright so we create the context and now we're using it so in the component all we have to do is a Const value for example it is equal to use context so the thing that we're importing from react and in the parenthesis we just pass in the context that we want to use so movie context that's the thing I want to use that's it that's it now here I have access to that value so take a look I can just create a h1 and just say value hit save let's take a look look at that we have hello let's change that let's go back to movie context I'm gonna change this hello to sound anything like hey this works awesome hit refresh and as you can see hey this works now if I want to use it somewhere else maybe I want to use it in my nav I life to the goal is go to my nav I need to import use context and movie context and I just say cost value equals use context and just wrap the movie context around it and now I have the information from here so everything that I have in here is available available to me ok cool add but I don't want this hey this works and here I want the movies how do I get the movies well that's super simple all we have to do is rather than rendering this string we can just have a an array and then we can just say movies and optionally we can set movies so I can render out the entire state from here so now I have an array with movies and set movies so now in here in our movie list rather than saying cons value I can get rid of this and this is kind of gonna look like the way we set our state you know we have movie and set movies so that's kind of the same thing I'm gonna do here I'm gonna say movies and set movies and everything should magically work let's get rid of this and let's also get rid of these well like that hit save let's take a look and look at that we're back to normal everything works the same way but we separated everything our state from this component into its own kind of context and here now look at this now we can super easily render our number of items and our nav if we want so let's take a look at how we can do that again we can go to the nav we can just import movie context from movie context good and if you remember the other thing that we need is use context okay that's how we use it we just say use context and down here we can say Const array and we can say movies and set movies that's gonna be equal to you use context and we're going to give it the context that we want to use movie context so here in the list list of movies all I want to do is just render out movies dot length hit save let's take a look and there we go we have three movies how easy is that so this just takes a bit of setup but once you do it it's very easy to just import this and use it in whatever components you want as long as again just you have everything wrapped around this and our app as long as you have this provider wrapped around all the other components your state is going to be accessible in here as a last step let's also create a component that will allow us to add additional movies to our list all right so it's good to add movie here and I'm gonna show you something cool how we can also pass functions down in our context and just use it wherever we want so I'm just gonna create an ADD movie Jes in here I cannot spell today there we go I'm gonna import react from react like that I'm gonna use Stape here so I'm gonna add a you state because I want to render out two inputs so I'm gonna create a Const add movie it's gonna be equal to an arrow function again and here I just want to have let's return a form so I'm gonna have a form I think so the action I'm gonna remove the action for now like so I'm gonna have an input type text like that I'm gonna have a that's at the name of name so this is gonna be the name of the title of the movie let's also create an input and this is gonna be the price so name is gonna be equal to price there we go let's also add a button that's gonna say submit perfect so let's get the state going here so we can get the information and we're gonna create a cause and I'm gonna set it to name and set name and this is going to be equal to you state and it's gonna be an empty string okay because our input is gonna be empty at the beginning the second one is gonna be the price so I'm gonna say price and set price this is gonna be equal to you state and another empty pair of strings perfect so let's create a function here that we can start writing and it's going to update this state we're gonna say Const update name it's gonna be equal to you I'm gonna add an event here as our parameter like that and now we can just call set name and the name I want is the element the event target value and what that is is basically the inputs text so now here we can set the value equal to and we can pass it this name value all right which is going to be an empty string again and now to update it we can set an on change and that's gonna be equal to you update name and that's it that's all we have to do we can actually just copy paste this down here and we can set update price to this update and we can just do kind of the same thing here value is gonna be priced now like so and the on change is gonna be equal to set price all right and the on change is gonna be update price here actually update price perfect so to finally submit this form I'm gonna create a Const add the movie function that's gonna be equal to I'm gonna add the event here again and I'm gonna use this event to prevent default which all it does is just stops the page from refreshing when you click on the forum so elements dirt not element event that prevent I I'm having a hard time now prevent default there we go perfect and all I want to do is set my movies here all right but hey we don't have access to the movies yet so we cannot do this whoo all right let's get this add movie and render it in our app in here I'm gonna import add movie from dot slash add movie and again I can render it here or wherever I want I'm just gonna do it here at movie let's just make sure it displays on the screen oh all right attempted imports does not contain a default export so we need to make sure that we export this head movie export default and movie perfect hit save let's take a look again everything works fine now so that's perfect but the problem is that we need to somehow add a movie from here and update our movie context okay because that's where all the information is coming from so how can we do that how can we get to run this code and update our state that we're using throughout our app because that's the problem we're having here we need to have access to the movies so again remember in our movie context we have access to set movies if we want so we can just use this all right so let's let's or this again the way we can import it is just say use context here use context and also can import a movie context import movie make sure to wrap this in curly braces movie context from dot slash movie context and now here all I have to do is say Const movies and set movies that's gonna be equal to use context and pass down the context I want to use I want to use the movie context perfect alright so now we have access to set movies in here so down here the way we can do it is we can say set movies and so and actually here you also have access to the latest rendered movie list so previous movies the reason why I'm doing this is because this way you can get the latest information about the state and here so everything is going to update correctly that's why I'm adding previous movies in here so eventually all I want to return is an array right because our movies list is an array here with all these small objects so the way we can do that is just say dot dot dot previous movies and what this three dots means with the previous movies it just means that it's gonna make a copy of our object here of our array of objects and now all I want to do is just add a comma and just add another object so I'm going to create another object in here and say hey the name is gonna be well the name from the state here and the price is gonna be well the price from our input and that's it it's safe now on at my form all I want to do is add and unsubmitted that's gonna be equal to and all we have to do is say add movies I'm executing this function hit save and let's pray for the gods and say what other movies are there and let me see the emoji movie and the price is zero zero dollar is because it's not a good and something weird happened here as you can see it resets so let's also take a look at what's going on in here so we set the value name to update name and the value price to update price the reason why that's happening is because we have set name on both of our functions so in this case yeah we set the name here but on the update price we set the price so set price hits save let's try the emoji movie again Mogi will be prices zero ballads hit submit and look at that there we go we have access to the emoji movie and now everything updates just fine list of movies is for now we're getting this error here the key props because I didn't pass down an ID with this new object but that's fine in this case and as you can see we can just create whatever we want and we have access to the state everywhere in our application downside of this context API that we're using is that it's really good if we want to just render out information okay so maybe I just want to render out the number like we did in our card here so I just imported everything let's go to the where is it into the nav here so I just imported in and I just I just displayed it on the screen so it's really good for that now the downside is if you want to change something in this context so in this case and the add movie we we set the movies here the problem is every time we we update the code in our use context all the components that use this context are gonna re render that's it thank you very much for watching don't worry if you didn't get it straight off the bat it can be quite a a difficult concept to to get a hang of but I highly recommend you to give it a shot and try it in your projects and once it clicks for you I promise that you're really gonna love it so that's it for me make sure to also drop a sub if you haven't so far and follow me on Twitter and and gram for additional content all right everybody until next time I hit the microphone

Channel: Dev Ed

Views: 403,473

Rating: 4.9565678 out of 5

Keywords: react js, react context, state management, dev ed, react state management, react tutorial, react tutorial for beginners, context api react, context api, react beginners, react state, react state tutorial, react redux, redux, react hooks, context vs redux, react tutorial 2019, react hooks tutorial, react hooks beginners, useState, useEffect, react setstate

Id: 35lXWvCuM8o

Length: 33min 18sec (1998 seconds)

Published: Wed May 01 2019