This course has been updated! We now recommend you take the State Management with Redux & MobX course.
Transcript from the "Component State Solution" Lesson
[00:00:02]
>> Steve Kinney: All right, so we did find one issue, which is I had named the component wrong. So if you're watching this later, I've already fixed it and pushed it up and everything is great. But if not, I just renamed this counter. The example will still work without that change, which is why I didn't catch it.
[00:00:16] But if you were slightly thrown off by that, I apologize. So inside this counter, really we just want to get the basic state of this, the basic component state up and working. Right now it only has render method. So we know that we want to basically have someone out of state and be able to modify that state with actions.
[00:00:35] We can do this a few ways. And I'll kind of do it a simple way and then I'll kind of refactor it a little bit to show you kind of a second approach that somebody asked me about in the chatroom. So the first thing we want to do is, get some state that we want to hold on to.
[00:00:48] So we can give it a constructor,
>> Steve Kinney: And we'll call it super. And I can say this dot state, I will say that the count we'll, start out at zero. All right, so now this component has some amount of state. We're not using it yet, but it has it.
[00:01:10] So the first thing I want to do, is I want to take this now like kind of default value, which is the zero, and then replace it with that state. Inside the render method, we have access to this dot state which allows us to go and pull that out.
[00:01:21] So we could say either, [SOUND]. So state, and we can say state.count. I don't really like that but we could do it. We can also use ES6 structuring. We just pull the count property out of the state object. So we can begin to put that in there. Now I could go look at that in the browser, but I'm not really gonna see a lot, unless I go ahead and change this to 54.
[00:01:49] And then I should expect to go over to my browser and see 54 in there.
>> Steve Kinney: And there is 54. Again this is state that doesn't change. And what was the first thing we said about state? Which is that, if it doesn't change, it probably, shouldn't be staked.
[00:02:07] But,we can kind of, see going forward that we have these three buttons. And, we likely aspire to change this, right. So, we implement those. And then, we'll refactor them, real quick. Again, this is just, kind of, to get out bearings. And, kind of, work out any sort of, issues along any sort of issues along those lines.
[00:02:25] Let's try it out. So, we're probably going to want, let's get increment working first and then we'll refactor it. And just kinda go forward rather than writing three methods and refactor all of them. I can give it a handle increment method. We can also do the inline function as well but that's gonna create a new function every time which is, I'm not worried about performance of this counter right now.
[00:02:49] But likely, we don't necessary want to create a new function object every single time we hit a render. It better off to have one reference on the class object. So we can say handling command and I'd say this.setState. We'll only take this.state and modify it. We'll talk about the why in a second, but we want to use said state instead of modifying the state itself.
[00:03:12] And we'll say count equals this.state.account plus one or whatever number you really like. Cool, this actually will blow up. Does anyone know why?
>> Steve Kinney: If we use it right here,
>> Steve Kinney: Why? Yeah, we've gotta bind it, which we'll get to, somebody asked me about refactoring, in a second, That I will explain why I did it in that case.
[00:03:44] So this'll call the handleIncrement method. But because it's gonna go to the event loop, we're gonna lose track of this. So this is going to be either the global object or undefined if we're in strict mode, and that's not great. So we'll get, handleIncrement is not a function, which is true, because it's not on the global object or anything along those lines.
[00:04:03] So what we could do, is we say, everyone's favorite thing to type into all of react, this.handleIncrement=this.handleIncrement.bind to this. Does anyone enjoy typing this? You feel good in the morning. I like it. I don't like to type it anymore. I've typed it way too many times in my life.
[00:04:23] Turns out if we're using modern versions of babble. We can actually write a slightly differently syntax and get around this, which is, we have the transform class properties, babble plug in. We can actually do this dot handleIncrement give it an arrow function. That'll actually define it on the instance and the arrow function will bind it to the instance.
[00:04:44] So now, I don't have to do that anymore.
>> Speaker 2: What stage is that? Is that a stage proposal or is that?
>> Steve Kinney: That is stage three, I believe.
>> Speaker 2: Really?
>> Steve Kinney: Yeah, I feel like I'm trying to a, consider a nine stages from memory, but I'm pretty sure it's stage three.
[00:05:00] I reserve the right to either A, be corrected on that or B, correct myself at a future time, but I'm pretty sure it's stage three. All right, so now we can handle increments. Let's verify that that works.
>> Steve Kinney: And we can increment it. We can also do something very similar with the state.
[00:05:20] And we can say, [SOUND] as well. And this will be on the instance. Most of the reason I'm doing that, for the arrow function. It's great to not have to bind this every time, cuz I will forget over the course of two days. Also with a very large font, it's nice to not have to type extra letters so we can see everything on one screen.
[00:05:43] Cool, so we can handle increment. We have some default state. Let's just verify that everything works again.
>> Steve Kinney: Cool, I can increment. Decrementing is not that different, [SOUND] handleDecrement will just subtract one, and reset will set it back to zero. [SOUND] And then we'll just,
>> Steve Kinney: handleDecrement and this.reset.
[00:06:30] And with that, we've implemented the very simple counter and react, nothing super special. Some new syntax which is basically, we use this one example so I could show it and use it. And we know that we've got a basic working setup. Great, let's move on to the next thing cuz we're gonna play with this a little bit more.
[00:06:48] But first, we're gonna play some games.