Complete React Tutorial (& Redux) #8 - Changing State (and 'this')

Key Takeaways

alright then so in the last video we saw that when we try to access this state inside our functions in reaction to Dom events in the window in the browser then this was undefined and we want to know why that is because we can access this dot state down here in the template but not up here inside the functions and that's to do with the value of the this keyword in these two different locations now in JavaScript the context of the this keyword inside a function is generally determined by how and where the function is called not by where the function sits okay now if you're not aware of this then sometimes the value of the this keyword inside a function is not what you'd expect so he would probably assume that the context of the this keyword inside one of these functions would point to our react component instance and would be able to access this dot state like in the template but by default when we call a function like this in reaction to a Dom events in the browser window like this click here the context of the this keyword is lost inside the function and it's set to undefined which is why we get undefined and an error in the console of a hit and when we try to do this ok so that there is the normal behavior of JavaScript there's no need to blame react for this now old versions of react bound the context of the this keyword right here to the component instance in our functions it did that for us in old versions but in the new version of react when we use class components like this then it doesn't do that for us anymore and we have to manually bind the context after this keyword to our functions now inside the render method down here we can access this state so why is that different well that is a built-in react function right and react automatically binds the context of this forest inside this function so we don't have to do any manual work there however inside own custom functions of this class when we tell them in reaction to Dom events the context of this is not bound so we have to do it ourselves now there's a couple of different ways to do this but the easiest way is very simple and it's just to use an arrow function for our methods up here instead of normal functions like this so for example if I set this equal to an arrow function like so then this will work and I'll demonstrate that now so if I save it and press click me then this now works we can log this dot state to the console but why is that well arrow functions right here they have a special behavior when it comes to this keyword they bind the value of this to whatever this is outside the function so whatever the value of this is right here and the value of this right here inside this class component is just a component instance so it's taking that value and it's binding it into this right here okay so when we use an arrow function it takes the value of this to be the component and passes it inside the function so now we can do that so that's the easy way to do this just change these two arrow functions like so and the value of this inside those arrow functions is now going to be equal to the component instance so we can access the state like that now if all of this went over your head don't worry too much about it you just have to remember that we define our custom functions inside components this way as arrow functions when we want to use this inside them and access or change the state now if you do want to read more about that this keyword in react there's a fantastic article which I'm going to leave the link to down below so you can go ahead and read that so now we know how to use this inside the functions we can see we can access the state this way and we saw that in the console over here we can log it over there now what if we want to change the state in reaction to some kind of event when we click on this I want to change the name to something else to Yoshi how do we do that well we don't just say this dot states that name is equal to yo should we don't do that that is bad practice don't change the state directly like that however we can say this dots set states and this is a function so this function is used to change the state and in here we pass an object and that object represents the states so what we do is pass in whichever properties we want to update we don't have to pass in them all we can just pass in one and that's going to update just that one property but if we want to we could pass in both of the properties or if there was a third property or three so I just want to update the name and I want to change that to Yoshi so this is gonna update the state for us and just change the name property it's gonna leave aged as it is so let's give this a whirl save it and if I come over here and click the button you can see now this has changed and it says my name is Yoshi and I'm 30 if we change the age as well set that to 25 save it click me and Yoshi and I'm 25 awesome so that my friends is the this keyword in react functions and how we can change or access the state inside our components