Before we move on from this example let's try a quick little exercise around handling text inputs.
So I want to make a little change to this text screen application.
We're not going to create a new component this time around.
Here's what I want to do.
I want that text screen demo to now do some password validation.
So the label at the top should be changed to say Enter password and then underneath that text input
we should show a error message of sorts.
It says that the password that the user enters must be longer than five characters.
Of course once a user enters a password of at least five characters.
So like many characters like so then we should somehow get that error message right there to go away.
So we essentially need to conditionally render some Jay a sex element to do so.
Let me give you a quick tip.
All right.
Back over here.
I want to show you how we can conditionally render some element very easily inside of my J.S. sex block
right here underneath the text element.
I'm going to add in a set of curly braces.
Now we've seen several times that he can use curly braces inside of Jay as sex to express to execute
some javascript expression.
We could put a ternary inside of here that conditionally either returns a maybe a text element or something
like that or nothing at all.
So let's see what that would look like.
I'm gonna give you a quick example here.
So maybe we would have like a quick test right here I'm just going to always return true.
So that would be the kind of check for my ternary expression and I'll put in my question mark.
And then if that expression right there is true.
Once again it definitely is.
I will return from the entire ternary expression a text element and inside there I can say like that
was true and I'll make sure that I also put in a negative case.
So after that text element I'll put a colon and then something to print out if that expression was not
true.
Remember technically inside of J.S. X Noel is a valid thing to show.
So if we don't want to show anything at all we can just put in null.
So if I now save that I'll go back to text demo and I'll see that was true.
If I put that to false instead and go back over I'll see nothing at all.
OK.
So with that in mind right there and knowing that we have access to the text inside of that text input
under the name state variable go ahead and give this exercise a shot they should not have to create
any new files or change any code anywhere except for that text screen component as usual if you don't
want to do this exercise.
No problem just go and check out the solution in the next video.