1 00:00:00,770 --> 00:00:04,680 At the end of the last video we got our air message to print up underneath each field. 2 00:00:04,790 --> 00:00:08,390 And I had mentioned that we probably only want to show this error message whenever a user submits the 3 00:00:08,390 --> 00:00:09,050 form. 4 00:00:09,110 --> 00:00:13,520 I was thinking about that a little bit and I realized that maybe there is a better way that we can choose 5 00:00:13,520 --> 00:00:17,360 to show this error message so rather than saying that we're going to show the error message only when 6 00:00:17,360 --> 00:00:18,760 the user clicks on submit. 7 00:00:18,890 --> 00:00:24,140 I think that we should only show the error message after the user clicks into a field enter some text 8 00:00:24,380 --> 00:00:26,360 and then clicks out of it. 9 00:00:26,410 --> 00:00:31,040 So notice how when I select an input I get that little blue boundary right there that indicates that 10 00:00:31,040 --> 00:00:33,280 this field is focused right now. 11 00:00:33,530 --> 00:00:38,420 When I click out the field so I click anywhere down here I no longer get that blue outline. 12 00:00:38,420 --> 00:00:43,850 So that means that the field is no longer focused we can actually watch for that event and only show 13 00:00:43,850 --> 00:00:47,610 the error message after the user has kind of clicked out of the field. 14 00:00:47,710 --> 00:00:51,450 And so I think that would be a little bit better to communicate errors to the user. 15 00:00:51,530 --> 00:00:55,360 So we don't have to wait for them to click on submit to show any possible errors. 16 00:00:55,760 --> 00:00:57,530 So let's figure out how we can do that. 17 00:00:57,620 --> 00:01:01,670 Now before we do one thing to mention really quickly you've probably noticed how any time I click on 18 00:01:01,670 --> 00:01:08,090 this input I see this autocomplete appear the autocomplete stuff is really annoying to me personally 19 00:01:08,090 --> 00:01:11,940 because it's hiding what I have on the screen from you actually sing it very easily. 20 00:01:11,990 --> 00:01:16,770 So if you want to we can optionally turn off auto complete on those text inputs. 21 00:01:16,970 --> 00:01:22,970 We can find the render input function or find our input tag right there and then we can add on auto 22 00:01:23,060 --> 00:01:26,060 complete equals off like so. 23 00:01:26,060 --> 00:01:29,350 Notice how there is a capital C in auto complete. 24 00:01:29,390 --> 00:01:36,340 Now if I saved this I can flip back over it when I type inside if I don't get any autocomplete or dropped 25 00:01:36,340 --> 00:01:38,720 down right and like at all. 26 00:01:38,730 --> 00:01:42,910 OK so let's get back on topic now we want to make sure that we can somehow only show the error message 27 00:01:42,940 --> 00:01:46,030 after the user clicks in and then clicks out. 28 00:01:46,330 --> 00:01:50,290 So to help you understand how we're going to do that we're going to cancel logged that met a property. 29 00:01:50,320 --> 00:01:51,730 One more time. 30 00:01:51,790 --> 00:01:54,430 It's like an ad in a console log of Metta. 31 00:01:55,060 --> 00:01:56,910 And I'm going to save this. 32 00:01:56,990 --> 00:02:02,360 I'll flip back over and remember we get to consulate's right here because we are showing it to different 33 00:02:02,360 --> 00:02:03,280 fields. 34 00:02:03,290 --> 00:02:09,140 I'm going to expand the second console log which is the meta property first specifically the description. 35 00:02:09,530 --> 00:02:14,780 And then inside of here you'll notice that there is a property called Touched. 36 00:02:14,850 --> 00:02:17,720 It's going to collapse this now knows how touched is false. 37 00:02:17,850 --> 00:02:21,540 And then I'm going to click into description I get another console log. 38 00:02:21,600 --> 00:02:25,800 I'm going to inspect that thing I see that touched is false again. 39 00:02:26,040 --> 00:02:31,310 And then as soon as I went back on my console I got a third console log because I de-selected that input. 40 00:02:31,320 --> 00:02:35,330 Now if I look at this object again I see that now touched is true. 41 00:02:35,640 --> 00:02:35,900 All right. 42 00:02:35,910 --> 00:02:36,720 That was a little bit unclear. 43 00:02:36,720 --> 00:02:37,440 So let's do it again. 44 00:02:37,440 --> 00:02:40,890 I'm going to clear that log or refresh the page. 45 00:02:41,010 --> 00:02:44,160 So I'll start off with a touch to false. 46 00:02:44,160 --> 00:02:48,330 Now if I click in and then click out here is the final console right. 47 00:02:48,340 --> 00:02:49,500 You're in touch just now. 48 00:02:49,500 --> 00:02:50,060 True. 49 00:02:50,310 --> 00:02:55,350 So essentially this meta touch property is going to be a boolean that reflects whether or not a user 50 00:02:55,350 --> 00:02:59,250 has kind of entered into an input and then de-selected it. 51 00:02:59,250 --> 00:03:03,870 So in other words if touched is equal that true we probably want to take that as an opportunity to show 52 00:03:03,870 --> 00:03:08,710 our error message to the user if touched is equal to false then we probably don't want to show the error 53 00:03:08,760 --> 00:03:13,200 message at all because the user hasn't really interacted with that input yet. 54 00:03:13,200 --> 00:03:13,420 All right. 55 00:03:13,440 --> 00:03:14,400 Let's give that a shot. 56 00:03:16,260 --> 00:03:20,940 So I'm going to remove the console log and then to figure out whether or not we should show this error 57 00:03:20,940 --> 00:03:21,620 message. 58 00:03:21,750 --> 00:03:26,460 We are going to end up having to write a decent amount of logic not only to decide if we want to show 59 00:03:26,460 --> 00:03:31,770 the error message but also to make sure that we render out the error message with some appropriate class 60 00:03:31,770 --> 00:03:33,180 names and styling. 61 00:03:33,240 --> 00:03:39,760 So rather than tucking all that logic directly into this div right here I'm going to define a helper 62 00:03:39,760 --> 00:03:48,860 method on our class called this render air and I'm going to pass into that that meta property. 63 00:03:48,890 --> 00:03:53,320 So right above render input I'll define render air. 64 00:03:53,330 --> 00:04:00,710 This is going to be called with the meta object but you and I only care about the air and touch properties 65 00:04:00,740 --> 00:04:01,260 in there. 66 00:04:01,280 --> 00:04:09,240 So we're going to structure out error and touched like so so inside of here we can say if the user has 67 00:04:09,240 --> 00:04:16,740 touched the form and there is an error message then we want to return some error message to show to 68 00:04:16,740 --> 00:04:17,360 the user. 69 00:04:18,380 --> 00:04:23,810 So when we return this we're going to return some nice looking stuff or nice nicely styled elements 70 00:04:23,810 --> 00:04:28,440 here so I'm going to return a div with a class name of UI error message 71 00:04:31,900 --> 00:04:35,880 and that's going to contain a div with the class name of Hetter. 72 00:04:36,090 --> 00:04:40,970 And then finally inside of that Hetter is where we will actually show the air to the user. 73 00:04:40,990 --> 00:04:47,380 So now inside of render input we are calling render air repassing and meta Mehta's couldn't decide whether 74 00:04:47,380 --> 00:04:48,630 or not to show the air. 75 00:04:48,700 --> 00:04:52,680 And then we will either return or not return some amount of GSX. 76 00:04:52,680 --> 00:04:53,520 Now a quick note here. 77 00:04:53,530 --> 00:04:57,670 When we save this and run it inside the browser we're going to very quickly see an error message. 78 00:04:57,670 --> 00:05:02,460 And I bet you can guess what that error message is going to be related to pretty quickly. 79 00:05:02,520 --> 00:05:08,140 So I'm going to save this and flip back over and I see a message your cannot read properly render air 80 00:05:08,170 --> 00:05:09,390 of undefined. 81 00:05:09,700 --> 00:05:14,680 And it looks like it's trying to select the input right here and say the error is on that line of code 82 00:05:14,680 --> 00:05:15,310 right there. 83 00:05:15,310 --> 00:05:17,620 In fact it's actually on line 20 for me. 84 00:05:17,880 --> 00:05:20,650 So the error is coming from calling this render error. 85 00:05:20,860 --> 00:05:21,980 So what's going wrong here. 86 00:05:22,180 --> 00:05:23,860 Well it's our classic friend. 87 00:05:23,950 --> 00:05:31,150 The problem of context inside of re-act classes or javascript classes to be more precise to remember 88 00:05:31,240 --> 00:05:36,420 render input is a function that we pass off to some other component. 89 00:05:36,700 --> 00:05:41,440 So when render input is called It is going to be called with a unknown value of this. 90 00:05:41,470 --> 00:05:46,120 In other words the keyword this side of render input is going to be unknown to us. 91 00:05:46,120 --> 00:05:49,190 It might be undefined it might be Noal it might be some other component. 92 00:05:49,270 --> 00:05:50,110 Who knows. 93 00:05:50,200 --> 00:05:53,760 But it's definitely not the context that we want for our component. 94 00:05:53,920 --> 00:05:57,070 So to fix this we're going to do the same thing we've done all along. 95 00:05:57,070 --> 00:06:00,530 All we have to do is turn render input into an arrow function. 96 00:06:00,850 --> 00:06:05,920 So I going to say render input equals and then on the other side of the argument list I'll put in my 97 00:06:05,920 --> 00:06:11,740 arrow like so now we can save this and we can flip back over. 98 00:06:11,840 --> 00:06:14,650 We're gonna get that reload as we go. 99 00:06:14,650 --> 00:06:20,190 And so now when I first see my screen right here my form I don't see any error message I can click in. 100 00:06:20,190 --> 00:06:24,220 And I don't see any error message but if I now de-select that input. 101 00:06:24,440 --> 00:06:26,920 I still don't see any major error message. 102 00:06:26,930 --> 00:06:30,030 And so when that happens you might be thinking Well that didn't work at all. 103 00:06:30,170 --> 00:06:32,870 Well this is a real big gotcha here. 104 00:06:32,870 --> 00:06:39,190 If you open up your chrome console and go to the elements tab you can select the element inspector right 105 00:06:39,190 --> 00:06:42,170 here and then just try clicking on the input right there. 106 00:06:43,270 --> 00:06:48,950 So here is our input right here and right underneath it is our div with UI error message. 107 00:06:49,030 --> 00:06:52,750 And inside there is the actual error message we want to show to the user. 108 00:06:52,780 --> 00:06:55,270 So the problem here is not that the error message isn't showing up. 109 00:06:55,270 --> 00:06:56,830 It technically is showing up. 110 00:06:56,830 --> 00:07:02,900 The problem is the fact that semantic UI by default is going to hide error messages. 111 00:07:03,130 --> 00:07:07,390 So if you click on UI error message right here and then you look at the CSSA panel you'll notice that 112 00:07:07,400 --> 00:07:09,120 it has a display of none. 113 00:07:09,310 --> 00:07:13,780 So this is CSSA that is hiding our error message from the user that's all. 114 00:07:14,020 --> 00:07:17,650 So essentially we just have to work with semantic UI a little bit to make sure that the error message 115 00:07:17,680 --> 00:07:18,720 actually shows up. 116 00:07:18,970 --> 00:07:21,160 Let's figure out how we take care of that in the next video.