1
00:00:01,370 --> 00:00:06,080
Let's take a look at a very quick exercise to make sure this idea of updating state based upon form

2
00:00:06,080 --> 00:00:07,390
events is really clear.

3
00:00:07,850 --> 00:00:11,900
So inside this exercise, you are going to be working with a component that has already been created

4
00:00:11,900 --> 00:00:12,350
for you.

5
00:00:12,710 --> 00:00:15,140
We've got a little password component like the one you see here.

6
00:00:15,140 --> 00:00:19,810
On the right hand side is password input has a little validation attached to it.

7
00:00:20,720 --> 00:00:25,040
The message right here says that a user has to enter a password that is at least four characters.

8
00:00:25,310 --> 00:00:29,090
But if I type in a really long parser right now, that warning message is still there.

9
00:00:29,770 --> 00:00:34,640
So I want to try to update this component and make sure that whenever user types in at least four characters

10
00:00:34,640 --> 00:00:37,330
to this input, that little warning message goes away.

11
00:00:38,330 --> 00:00:42,890
Let's take a look at the implementation of that password component, we could find the implementation

12
00:00:42,890 --> 00:00:45,170
for it inside the Validator JS file.

13
00:00:45,830 --> 00:00:49,700
So inside of here you're going to see a lot of code that looks very similar to the code that we're working

14
00:00:49,700 --> 00:00:51,190
on inside of our project right now.

15
00:00:51,990 --> 00:00:57,030
There is already a piece of state called password that has been initialized and the warning message

16
00:00:57,030 --> 00:01:00,290
that is being displayed is taking a look at that password piece of state.

17
00:01:00,840 --> 00:01:06,000
So all we really have to do here is make sure that whenever user types inside of this input, we take

18
00:01:06,000 --> 00:01:11,730
that change event we read at the current value of the input and use it to update our password piece

19
00:01:11,730 --> 00:01:12,300
of state.

20
00:01:13,490 --> 00:01:18,440
Once we then have that updated value, we should then make sure that we assign that value prop back

21
00:01:18,440 --> 00:01:19,520
to this text input.

22
00:01:20,210 --> 00:01:25,820
So in total, we really only have to add about two lines of code here just to props to this text input

23
00:01:26,090 --> 00:01:28,300
the value prop and the on change prop.

24
00:01:28,940 --> 00:01:30,380
So go ahead and give that a shot.

25
00:01:30,860 --> 00:01:33,310
We'll go ahead and go over solution in just a moment.