All right my friends.
Let's take a look at the solution for this little exercise.
The first thing I'm going to do is update that label at the very top.
Rather than enter name I'll say enter password.
That's kind of the easy one right there.
Next up we should do a check to see if this state variable right here is longer than four characters.
If you decided to rename the state variable to password instead that's totally fine.
Let me just show you that process right now.
Just in case you did as well it's going to change the state variable of name to password and I'll change
set name to set password as well.
Now we have to go back through our ASX and update the appropriate references.
So first off value right here is going to be password instead and then set name will be set password.
And then finally we probably want to show a text element that prints out the user's password in plain
text.
It's going to delete that as well.
OK.
So now we can place a ternary expression inside of our ASX to decide whether or not we need to show
that error message.
I'm going to delete that existing Turner expression I wrote out there just so I can write it from scratch.
All right.
So inside of here I will check password dot link and I'll say if password length is less than four characters.
So that expression right there if that evaluates to TRUE THEN I WANT TO SHOW MY TEXT element with the
error message so I'll put in my question Mark.
I'll put down the truth.
Case or the true case they'll show a text element and I'll say password must be for characters or I
guess at least either phrasing works just fine.
It's just a quick example and then if the user's password is longer than four then let's go ahead or
at least four I suppose we'll put in our colon over here and put a note to say that we don't want to
show the error message if the password is in fact at least for OK.
Let's save this and do a quick test.
I'll go back to my text demo by default.
I see that error message.
So now I can start to type in there a SDF.
There's my fourth character as soon as I Internet fourth character.
The error message goes away.
Of course if I now go back down underneath four characters the error message comes back.
Remember every single time that we update a state variable our component renders so every single time
whether I am adding characters or removing characters we are always going to re render this component
and reevaluate that ternary expression OK.
So hopefully you got this put together this looks pretty good.
So let's take a quick pause right here and continue in the next video.