Stateful Components

[00:00:00]
>> Mike North: The next thing we're going to do is add some state to our login form component, right, some state that this component holds and manages. And what we're gonna do with this is rather than, I'm just gonna up the components JavaScript file, login form JS, rather than when this submit event fires, doing some DOM querying and plucking a value out of select.

[00:00:31]
We wanna maintain a value that's always up to date, that lets us get a hold of the currently selected user's ID. Right, so if I were to go into the login screen,
>> Mike North: As I change from user to user, we wanna have some component state that is kept up-to-date, UserId1, UserId2.

[00:00:54]
And based on that, we wanna disable or enable this Sign In button. You shouldn't be able to log in if you have not yet selected a user, so let's get started with that. I'm in the login form component and the first thing I wanna do is create a new property that will serve to hold this currently selected user ID.

[00:01:18]
And we'll do that the following way, user ID, and we'll initialize it to null. By default you'd like load this component up, no user should be selected. Makes sense, that is what we would want in this situation. So what we can then do is go to this component's template, and the way in HTML we indicate the selected option in this select tag, is with the selected attribute.

[00:01:58]
Now we've got Testy Testerson, so we just need selected to show up on whoever's option matches user ID and here's how we do that. So these two are gonna actually treat the same. So we're gonna say selected is true when one equals this dot user ID, right? This thing that we have up here, this is gonna be null at the beginning and then one and then two, right?

[00:02:32]
So here's how we would do that. We would use a helper called EQ which is equals.
>> Mike North: And then we'll take their respective values, and put them here. Now, we should be able to at this point, I'm gonna leave this on the screen for you folks. That's what we just did right there.

[00:02:57]
I'm just gonna demonstrate that this works by initializing this to one, all right? All right, so no change but that's what it was defaulting to before. If we initialized this to two, sample mcdata on the right in our HTML. So we can see that now we can control the initial selection state with user ID.

[00:03:21]
We need this third one up here which is gonna look like this. Selected = not this.userid, it's like a falsy check, right? If use ID is truthy,
>> Mike North: Then we certainly shouldn't have that, this first item selected, right? This select a user should be what we see if user ID is null or undefined, or something.

[00:03:53]
So that is what this means here. It's the equivalent ofexclamation mark this dot user ID. And if we initialize this to null, ooh interesting. What is going on here? Maybe empty string? No, it's disabled, there we go, that's probably it. Yup, there we go. So it had a disabled attribute, little snag there.

[00:04:24]
>> Mike North: And now we can see depending on whether we initialize to null, or to one, or to two, that this user ID property, it is used in the initial rendering of this component in order to properly set our initial state up. That's one thing we need here.