Let's take a look at a very quick exercise to make sure this idea of updating state based upon form
events is really clear.
So inside this exercise, you are going to be working with a component that has already been created
for you.
We've got a little password component like the one you see here.
On the right hand side is password input has a little validation attached to it.
The message right here says that a user has to enter a password that is at least four characters.
But if I type in a really long parser right now, that warning message is still there.
So I want to try to update this component and make sure that whenever user types in at least four characters
to this input, that little warning message goes away.
Let's take a look at the implementation of that password component, we could find the implementation
for it inside the Validator JS file.
So inside of here you're going to see a lot of code that looks very similar to the code that we're working
on inside of our project right now.
There is already a piece of state called password that has been initialized and the warning message
that is being displayed is taking a look at that password piece of state.
So all we really have to do here is make sure that whenever user types inside of this input, we take
that change event we read at the current value of the input and use it to update our password piece
of state.
Once we then have that updated value, we should then make sure that we assign that value prop back
to this text input.
So in total, we really only have to add about two lines of code here just to props to this text input
the value prop and the on change prop.
So go ahead and give that a shot.
We'll go ahead and go over solution in just a moment.