1
00:00:00,900 --> 00:00:06,180
Before we move on from this example let's try a quick little exercise around handling text inputs.

2
00:00:06,180 --> 00:00:09,360
So I want to make a little change to this text screen application.

3
00:00:09,360 --> 00:00:11,400
We're not going to create a new component this time around.

4
00:00:12,030 --> 00:00:13,200
Here's what I want to do.

5
00:00:13,320 --> 00:00:17,760
I want that text screen demo to now do some password validation.

6
00:00:17,760 --> 00:00:22,830
So the label at the top should be changed to say Enter password and then underneath that text input

7
00:00:23,040 --> 00:00:25,070
we should show a error message of sorts.

8
00:00:25,130 --> 00:00:29,420
It says that the password that the user enters must be longer than five characters.

9
00:00:29,670 --> 00:00:33,450
Of course once a user enters a password of at least five characters.

10
00:00:33,450 --> 00:00:39,390
So like many characters like so then we should somehow get that error message right there to go away.

11
00:00:39,390 --> 00:00:43,830
So we essentially need to conditionally render some Jay a sex element to do so.

12
00:00:43,830 --> 00:00:45,900
Let me give you a quick tip.

13
00:00:45,990 --> 00:00:46,290
All right.

14
00:00:46,290 --> 00:00:47,040
Back over here.

15
00:00:47,040 --> 00:00:53,490
I want to show you how we can conditionally render some element very easily inside of my J.S. sex block

16
00:00:53,490 --> 00:00:55,600
right here underneath the text element.

17
00:00:55,680 --> 00:00:58,160
I'm going to add in a set of curly braces.

18
00:00:58,170 --> 00:01:02,910
Now we've seen several times that he can use curly braces inside of Jay as sex to express to execute

19
00:01:02,910 --> 00:01:04,650
some javascript expression.

20
00:01:04,830 --> 00:01:11,250
We could put a ternary inside of here that conditionally either returns a maybe a text element or something

21
00:01:11,250 --> 00:01:13,710
like that or nothing at all.

22
00:01:13,710 --> 00:01:15,250
So let's see what that would look like.

23
00:01:15,250 --> 00:01:16,930
I'm gonna give you a quick example here.

24
00:01:17,010 --> 00:01:22,100
So maybe we would have like a quick test right here I'm just going to always return true.

25
00:01:22,110 --> 00:01:27,450
So that would be the kind of check for my ternary expression and I'll put in my question mark.

26
00:01:27,450 --> 00:01:29,300
And then if that expression right there is true.

27
00:01:29,320 --> 00:01:30,980
Once again it definitely is.

28
00:01:31,320 --> 00:01:37,320
I will return from the entire ternary expression a text element and inside there I can say like that

29
00:01:37,320 --> 00:01:41,640
was true and I'll make sure that I also put in a negative case.

30
00:01:41,680 --> 00:01:46,750
So after that text element I'll put a colon and then something to print out if that expression was not

31
00:01:46,750 --> 00:01:47,640
true.

32
00:01:47,710 --> 00:01:52,130
Remember technically inside of J.S. X Noel is a valid thing to show.

33
00:01:52,150 --> 00:01:55,350
So if we don't want to show anything at all we can just put in null.

34
00:01:55,450 --> 00:01:59,630
So if I now save that I'll go back to text demo and I'll see that was true.

35
00:01:59,920 --> 00:02:05,950
If I put that to false instead and go back over I'll see nothing at all.

36
00:02:06,040 --> 00:02:06,290
OK.

37
00:02:06,320 --> 00:02:11,270
So with that in mind right there and knowing that we have access to the text inside of that text input

38
00:02:11,330 --> 00:02:16,460
under the name state variable go ahead and give this exercise a shot they should not have to create

39
00:02:16,490 --> 00:02:22,850
any new files or change any code anywhere except for that text screen component as usual if you don't

40
00:02:22,850 --> 00:02:23,990
want to do this exercise.

41
00:02:23,990 --> 00:02:27,290
No problem just go and check out the solution in the next video.