Kent C. Dodds: 0:00 The next thing that we want to do is validate that the username is lowercase. Let's just say that we can't have any uppercase characters. As the user's typing, we want to say, "Hey, yo, you're typing uppercase characters, we can't accept that input."

0:14 Let's just get a look at what this looks like. If we type in uppercase, then we're going to get, "Username must be lowercase." How would we build this in our own example here?

0:26 What we need to do is we need to have some sort of change handler on the input, so that as the user's making changes and typing in here, we can determine whether the input is valid and show an error message if it's not.

0:40 We're going to come over here, and I'm going to make a function called handleChange(). This is going to take an event. This event, we don't need to prevent the default because the default behavior is fine and the change event case because there's not really a default behavior in this case. We're going to apply this handleChange to the input. We want to listen to changes on the input.

1:05 We'll say onChange = {this.handleChange}. Now, our event.target value is going to be the input, not the form because the element that's experiencing or that is the target of the event is the input. We can get the value out of the event.target.

1:25 With that value, I can determine whether or not it is all lowercase by saying value.toLowerCase. If that value is equal to itself when it's been too lowercased, then we know if it is lowercase.

1:42 If that's the case, then we don't have an error. We're totally good. If not, then we need to show the user some error. What we need to do here now is maintain some error state. We're going to do that using another React hook called React.useState. We'll pass in null for that and that is going to be the initial value for our state.

2:03 As this component gets started, React is going to give us a state value that starts out as null. We're going to say error and setError are what we get back from useState. useState gives us an array, where the first value of that array is the actual state value over time. The second value is a mechanism for updating that state.

2:27 Now that we have this, I can say setError and if it is lowercase, then we're fine. We'll just set it to null. Otherwise, we'll specify, "Username must be lower case." Based on that, we can display an error. Right above the Submit button, I'll say div, with the style, color red, just for funsies, and we'll put the error right in there.

2:51 If there is an error, then that will get rendered. If there's not, then it'll still get rendered, but the contents of this div will be empty, so it won't show up for the user, which is fine for our example here. For the button, I want to disable that button if they've typed something invalid.

3:06 I'm going to say disabled is true or false. We're going to disable it if there is an error, and we'll set it to false if there's no error. We'll pass in the error here. Just to make it more explicit, I'm going to say Boolean error. Now we're absolutely passing true or false to this value.

3:24 If we save that now, we can type in uppercase and we're totally not good. We can't click on Submit. If we type a lowercase, then we're totally good, and we can click on Submit.

3:35 In review, to make all of this magic happen, we had to add a handleChange here to our input, so we could handle change events. Then we got the value for that target, which is the input.

3:47 We determined whether or not it's lowercase. Then we set the error state based on whether it's lowercase. If it is lowercase, then we just set it to null, so there's no error. If it's not lowercase, then we'll set it to this string, and we got that setError by using the useState hook from React, which will just maintain some state for us over time.

4:09 It gives us the current state and it gives us a mechanism for updating that state. Based on that state, we're going to set the disabled value of the Submit button, and we're going to render the error if there is an error there.

4:22 We'll get a deeper dive of these hooks later. If this is a little bit confusing to you, don't worry, it'll click eventually, I promise.