This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Managing State" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Brian Holt: Now we have a state full component and not much has changed so far.
>> Brian Holt: Now what we're gonna do is we're gonna start adding some state to it. I don't know why I have two different things here. I'll just show you both syntaxes, that's all. Okay, so now we have to put in another method called getInitialState.
[00:00:41]
>> Brian Holt: Always a danger of writing this off the top of your head. This actually doesn't take anything, so it's just as that, okay. This is though maybe the major key difference between the class syntax and this syntax. With the class syntax you do this instead of the constructor.
[00:01:01] The constructors is like, what's run when you create the new object. Inside of their create class way of writing this you do instead of getInitialState. So that's the biggest difference.
>> Brian Holt: Here, we're going to return an object that we want to be the initial state of our particular component.
[00:01:20] So in this particular way, we're gonna say return searchTerm and then you can put whatever string you want here like this is my search term. Whatever you want the default thing to be, okay? And then what we're gonna do is we're gonna go down to the input here and we're gonna make this value equals this.state.search term, okay?
[00:01:57]
>> Brian Holt: And just to show you that you can reference this in multiple places. What I'm gonna do here is svideo. Just temporarily I'm gonna change this to be this.state.searchTerm as well.
>> Brian Holt: We'll change that back here in just a sec. But this is just for demonstration purposes. Okay, so save all that.
[00:02:25]
>> Speaker 2: Comma after the getInitialState.
>> Brian Holt: Yes, you do. The dangers of changing your notes on the fly. So when you're doing the class syntax. ES6 classes expect no commas between methods. I don't know why they decided that because it just seems to be inconsistent. But that's what the TC39 decided whereas like now we're just an object, right?
[00:02:48] You obviously need commas inside of your objects. Okay, so yeah, save that. Yeah, that worked just fine. So let's refresh. So now it says, this is my searchTerm right here, and notice that's what it says inside the box too. But I want you to go and try and type inside of the search box.
[00:03:12] [SOUND] We broke it. [LAUGH] How do you break an input? It's actually very difficult to break an input. They work fairly well for the most part. Let's talk about what React is doing underneath the hood here. What React is actually trying to do here is every time I touch that keyboard, React is like, I know an event happened, right?
[00:03:33] So I'm gonna fire off a re-render cycle. Well you have to remember, this is my search term. So every time it re-renders, it's going to put that in the value here. And because nothing is actually changing, there's nothing binding this input to this search term. So every time it fires off that re-render it's it's just gonna put it right back where it was right, because nothing ever modifies it.
[00:03:57] Does that makes sense? I mean it's crazy, right? Like it's kind of dumb and I actually, like a lot of people don't like React for that reason. There's none of this magical to a binding read like that's that's a term that they're loves to throw around these two way bindings also Ember does it too and everyone does.
[00:04:15] This takes a much more explicit approach is like hey this is your UI, you need to handle your own events. So let's make it handle its own events.
>> Brian Holt: We are gonna put in a another method in here called handle search term event. It takes in an event.
[00:04:41] All this is gonna do is this is gonna say this.setState.
>> Brian Holt: searchTerm: event.target.value. If anyone's ever done jQuery before, that looks super familiar, right? The event.target.value, right? This event is actually not really a DOM event, it's a synthetic event but you can treat it just like a normal event.
[00:05:11] They've emulated the API perfectly.
>> Brian Holt: Okay? So now we have our event handler. Now we have to actually make it handle the event. So we're gonna go down here to the input and then we're are gonna say, onChange this.handleSearchTermEvent.
>> Brian Holt: So this part right here. So we had added handleSearchTermEvent and we added this onChange right here.
[00:06:01]
>> Brian Holt: Any questions about that? To make sure I'm not blowing up anything here. Let's get here.
>> Brian Holt: And let's go ahead and refresh here. So now hopefully.
>> Brian Holt: If you look over here it's magically on the fly updating our title over here. So now, it actually is bound to each other.
[00:06:34]
>> Brian Holt: Data binding is not free in React. But it's pretty cheap. It's not very expensive to do. I like it better because there's no black magic here, right. I hate when I'm doing writing code, it's why I don't write Rails, right? If you buy into the Rails methodology and you buy into the Rails black magic, it's the best, right.
[00:06:55] Because you do things and like I do one thing, then you skip steps two three four and five and you're omit the step six, right. My programming mind doesn't work as I wanna know what's happening on the steps in the middle. And particularly if there's a bug in the middle of those steps like then I'm just livid right because they messed it up not me.
[00:07:13] And if I have bugs, I want them to be my bugs because I wrote them because I'm the idiot, not someone else is the idiot. So that's why I like this, there's no black magic to it. I know exactly how I'm getting from point A to point B.
[00:07:29] A lot of people will comment to me like this feels like back in 1999 when I was saying like onChange right directly in the DOM. I feel like this is OK because on the flip side, right, because now I can say onChange this.handleSearchTerm. Where is this start handleSearchTerm?
[00:07:47] It's right here, like it's literally just above it, right. Whereas in the other case, you'd read it in your HTML and then it'd be in some other random JavaScript file that who the hell knows where that is, right. This is nice because all of our concerns are just mashed together in one component.
[00:08:05] Okay. Any questions about that?
>> Speaker 3: So like 95% of the time though, input binding shouldn't be much more complicated than just modifying the string, right.
>> Brian Holt: Mm-hm.
>> Speaker 3: And there's no shorthand for that?
>> Brian Holt: There is, there is link events. It's a React add-on, so it actually is maintained by React itself.
[00:08:27] And there's link state, that's what it's called, React link state. So if you wanna Google and use that, it's not a whole lot more short than this, to the point that sometimes like you need to do some sort of other data merging in here rather than, it's not so simple as the sidestep state.
[00:08:45] So the nice thing about doing it the long way, the long way, like the additional 20 characters you are gonna type here is now I already have this method here if I have to go ever change in the future.