1 00:00:00,810 --> 00:00:01,520 All right my friends. 2 00:00:01,530 --> 00:00:04,870 Let's take a look at the solution for this little exercise. 3 00:00:04,910 --> 00:00:07,490 The first thing I'm going to do is update that label at the very top. 4 00:00:07,620 --> 00:00:09,840 Rather than enter name I'll say enter password. 5 00:00:09,840 --> 00:00:12,140 That's kind of the easy one right there. 6 00:00:12,150 --> 00:00:18,170 Next up we should do a check to see if this state variable right here is longer than four characters. 7 00:00:18,210 --> 00:00:22,500 If you decided to rename the state variable to password instead that's totally fine. 8 00:00:22,500 --> 00:00:24,000 Let me just show you that process right now. 9 00:00:24,000 --> 00:00:30,570 Just in case you did as well it's going to change the state variable of name to password and I'll change 10 00:00:30,630 --> 00:00:33,720 set name to set password as well. 11 00:00:33,720 --> 00:00:37,870 Now we have to go back through our ASX and update the appropriate references. 12 00:00:37,950 --> 00:00:45,180 So first off value right here is going to be password instead and then set name will be set password. 13 00:00:45,310 --> 00:00:49,620 And then finally we probably want to show a text element that prints out the user's password in plain 14 00:00:49,620 --> 00:00:50,200 text. 15 00:00:50,200 --> 00:00:51,430 It's going to delete that as well. 16 00:00:52,560 --> 00:00:52,830 OK. 17 00:00:52,830 --> 00:00:57,960 So now we can place a ternary expression inside of our ASX to decide whether or not we need to show 18 00:00:57,960 --> 00:00:59,360 that error message. 19 00:00:59,370 --> 00:01:04,370 I'm going to delete that existing Turner expression I wrote out there just so I can write it from scratch. 20 00:01:04,410 --> 00:01:04,710 All right. 21 00:01:04,740 --> 00:01:14,000 So inside of here I will check password dot link and I'll say if password length is less than four characters. 22 00:01:14,000 --> 00:01:18,500 So that expression right there if that evaluates to TRUE THEN I WANT TO SHOW MY TEXT element with the 23 00:01:18,500 --> 00:01:21,670 error message so I'll put in my question Mark. 24 00:01:21,680 --> 00:01:22,880 I'll put down the truth. 25 00:01:22,880 --> 00:01:33,190 Case or the true case they'll show a text element and I'll say password must be for characters or I 26 00:01:33,190 --> 00:01:36,620 guess at least either phrasing works just fine. 27 00:01:36,700 --> 00:01:43,020 It's just a quick example and then if the user's password is longer than four then let's go ahead or 28 00:01:43,020 --> 00:01:48,570 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 29 00:01:48,570 --> 00:01:54,600 show the error message if the password is in fact at least for OK. 30 00:01:54,640 --> 00:01:57,170 Let's save this and do a quick test. 31 00:01:57,240 --> 00:01:59,370 I'll go back to my text demo by default. 32 00:01:59,370 --> 00:02:00,920 I see that error message. 33 00:02:00,960 --> 00:02:03,430 So now I can start to type in there a SDF. 34 00:02:03,720 --> 00:02:06,700 There's my fourth character as soon as I Internet fourth character. 35 00:02:06,750 --> 00:02:08,650 The error message goes away. 36 00:02:08,680 --> 00:02:13,780 Of course if I now go back down underneath four characters the error message comes back. 37 00:02:13,980 --> 00:02:19,110 Remember every single time that we update a state variable our component renders so every single time 38 00:02:19,110 --> 00:02:24,180 whether I am adding characters or removing characters we are always going to re render this component 39 00:02:24,450 --> 00:02:28,040 and reevaluate that ternary expression OK. 40 00:02:28,070 --> 00:02:30,680 So hopefully you got this put together this looks pretty good. 41 00:02:30,740 --> 00:02:33,500 So let's take a quick pause right here and continue in the next video.