At the end of the last video we got our air message to print up underneath each field.
And I had mentioned that we probably only want to show this error message whenever a user submits the
form.
I was thinking about that a little bit and I realized that maybe there is a better way that we can choose
to show this error message so rather than saying that we're going to show the error message only when
the user clicks on submit.
I think that we should only show the error message after the user clicks into a field enter some text
and then clicks out of it.
So notice how when I select an input I get that little blue boundary right there that indicates that
this field is focused right now.
When I click out the field so I click anywhere down here I no longer get that blue outline.
So that means that the field is no longer focused we can actually watch for that event and only show
the error message after the user has kind of clicked out of the field.
And so I think that would be a little bit better to communicate errors to the user.
So we don't have to wait for them to click on submit to show any possible errors.
So let's figure out how we can do that.
Now before we do one thing to mention really quickly you've probably noticed how any time I click on
this input I see this autocomplete appear the autocomplete stuff is really annoying to me personally
because it's hiding what I have on the screen from you actually sing it very easily.
So if you want to we can optionally turn off auto complete on those text inputs.
We can find the render input function or find our input tag right there and then we can add on auto
complete equals off like so.
Notice how there is a capital C in auto complete.
Now if I saved this I can flip back over it when I type inside if I don't get any autocomplete or dropped
down right and like at all.
OK so let's get back on topic now we want to make sure that we can somehow only show the error message
after the user clicks in and then clicks out.
So to help you understand how we're going to do that we're going to cancel logged that met a property.
One more time.
It's like an ad in a console log of Metta.
And I'm going to save this.
I'll flip back over and remember we get to consulate's right here because we are showing it to different
fields.
I'm going to expand the second console log which is the meta property first specifically the description.
And then inside of here you'll notice that there is a property called Touched.
It's going to collapse this now knows how touched is false.
And then I'm going to click into description I get another console log.
I'm going to inspect that thing I see that touched is false again.
And then as soon as I went back on my console I got a third console log because I de-selected that input.
Now if I look at this object again I see that now touched is true.
All right.
That was a little bit unclear.
So let's do it again.
I'm going to clear that log or refresh the page.
So I'll start off with a touch to false.
Now if I click in and then click out here is the final console right.
You're in touch just now.
True.
So essentially this meta touch property is going to be a boolean that reflects whether or not a user
has kind of entered into an input and then de-selected it.
So in other words if touched is equal that true we probably want to take that as an opportunity to show
our error message to the user if touched is equal to false then we probably don't want to show the error
message at all because the user hasn't really interacted with that input yet.
All right.
Let's give that a shot.
So I'm going to remove the console log and then to figure out whether or not we should show this error
message.
We are going to end up having to write a decent amount of logic not only to decide if we want to show
the error message but also to make sure that we render out the error message with some appropriate class
names and styling.
So rather than tucking all that logic directly into this div right here I'm going to define a helper
method on our class called this render air and I'm going to pass into that that meta property.
So right above render input I'll define render air.
This is going to be called with the meta object but you and I only care about the air and touch properties
in there.
So we're going to structure out error and touched like so so inside of here we can say if the user has
touched the form and there is an error message then we want to return some error message to show to
the user.
So when we return this we're going to return some nice looking stuff or nice nicely styled elements
here so I'm going to return a div with a class name of UI error message
and that's going to contain a div with the class name of Hetter.
And then finally inside of that Hetter is where we will actually show the air to the user.
So now inside of render input we are calling render air repassing and meta Mehta's couldn't decide whether
or not to show the air.
And then we will either return or not return some amount of GSX.
Now a quick note here.
When we save this and run it inside the browser we're going to very quickly see an error message.
And I bet you can guess what that error message is going to be related to pretty quickly.
So I'm going to save this and flip back over and I see a message your cannot read properly render air
of undefined.
And it looks like it's trying to select the input right here and say the error is on that line of code
right there.
In fact it's actually on line 20 for me.
So the error is coming from calling this render error.
So what's going wrong here.
Well it's our classic friend.
The problem of context inside of re-act classes or javascript classes to be more precise to remember
render input is a function that we pass off to some other component.
So when render input is called It is going to be called with a unknown value of this.
In other words the keyword this side of render input is going to be unknown to us.
It might be undefined it might be Noal it might be some other component.
Who knows.
But it's definitely not the context that we want for our component.
So to fix this we're going to do the same thing we've done all along.
All we have to do is turn render input into an arrow function.
So I going to say render input equals and then on the other side of the argument list I'll put in my
arrow like so now we can save this and we can flip back over.
We're gonna get that reload as we go.
And so now when I first see my screen right here my form I don't see any error message I can click in.
And I don't see any error message but if I now de-select that input.
I still don't see any major error message.
And so when that happens you might be thinking Well that didn't work at all.
Well this is a real big gotcha here.
If you open up your chrome console and go to the elements tab you can select the element inspector right
here and then just try clicking on the input right there.
So here is our input right here and right underneath it is our div with UI error message.
And inside there is the actual error message we want to show to the user.
So the problem here is not that the error message isn't showing up.
It technically is showing up.
The problem is the fact that semantic UI by default is going to hide error messages.
So if you click on UI error message right here and then you look at the CSSA panel you'll notice that
it has a display of none.
So this is CSSA that is hiding our error message from the user that's all.
So essentially we just have to work with semantic UI a little bit to make sure that the error message
actually shows up.
Let's figure out how we take care of that in the next video.