The last thing that we need to do inside of our component is make sure that we get our text to show
up as red and the outline of our input to show up as read as well.
Now just to get these things to show up as red will be making use of a little bit of built in CSSA that
is included with bootstrap inside of our starter project.
So effectively to get these things to turn up as read all we have to do is get the appropriate class
names on the fields that are generating the input and the text so effectively back inside of our code
editor.
I'm going to find the render field function.
I'm going to find the wrapping div that has a class name of form group.
So if we just apply a class name of has danger to this thing we should get the correct styling that
we're looking for.
So let's take a look.
If I just hardcoded on here and we say it's always going to show a has danger.
And then I flip back over to the browser call.
We get the outline to appear as read and then to get the text to appear as read we can add in a div
around the error message down here.
So I'm going to put on a little div and I'm going to give it the class name of text Dasch help text
hash help is going to work along with the has danger rule.
Right above it to make sure that this text appears as read.
Now if we flip back over and refresh and then touch each one.
Yeah there we go.
So now these things are hard coded as always being read.
So it's OK if we leave the text here as read 100 percent of the time because if there is no error this
text isn't valid or you mean the text is not visible at all.
So really what we need to do is make sure that we only show the input as read where we only apply that
class name of has danger when the field is not valid.
So I want to expand on that last point just a little bit.
When exactly do we want to apply the class name of has danger in the past.
We were saying OK well if the user has touched it then we will show an error message.
But this time around we really only want to apply this class name right here.
If the user has both touched the field and there is an air present.
So I think that we can probably use a tertiary expression again for generating this class name right
here.
But this time the Turner expression is going to look just a little bit different because we want to
make sure that the user has both touched it and an error message exists.
Ok so with that preamble out of the way rather than putting the entire class name directly in here inside
the div in the GSX I think it would be really nice just for code organization if we generated the class
name right above it.
So let's say class name and we're going to use a template string here again.
So I'll use my back Tick's will say that it always needs to be a form group and then we'll use our string
template right here so make sure you get the dollar sign in the curly brace and then inside of there
will place our Turner expression.
So if field don't meddle don't touch and feel dot net or dot air then we'll use a class name of has
danger otherwise empty string for this expression right here.
So this is a rather long little segment right here.
We could probably clean it up by using just a little bit of destructuring.
Let's do that just to make everything appear a little bit nicer.
So right above we'll just restructure off the property so we can drop fields from right here right here
right here and right here.
So we'll grab Mehta from field and now we can clean up the first field the second field number three
and number four as well.
Now we could also structure the touched in air properties off of the mega object as well.
So we can use destructuring not only to pull off the first value or the first property off of an object
but we can also use destructuring to access nested properties as well.
So I think this would probably be a good place to use that.
So let's go one step further and we're going to say off of the metal object that we are destructuring
off of field.
I also want to structure touch and air like so.
So if you look at the syntax right here this is a little bit of a side into 6 by the way which we're
talking about right now.
This might look like it would be expanded to be a object like touch touch.
Right because we've used this syntax several times throughout this course we've said well you have the
key and the value are the same.
You can just condense down to be like so in this case when we're using this compacted syntax with destructuring.
This does not get expanded into an object.
It is just used for structuring to pull off the properties touched and air from the meta object.
So again this is how we use destructuring to access properties on nested objects so that refactor.
Now we can go to be in just touched and air and then inside of the div down here we can be just touched
and there like so.
OK I think that looks much better with that little bit of E-6 refactor glass so we have to do is make
sure that we apply this class name to our div.
So I will replace the hardcoded class name with the class name variable like so.
I think that we're ready for a test.
Let's flip back over to the browser.
So when everything first renders I expect to see absolutely no error messages.
Yup that looks good.
Now if I select or focus an input and I put in no text and focus another one the entire thing turns
red.
Ok that looks good but if I go back into that input and enter in some text everything goes back to saying
OK that looks like valid input.
You also notice that now.
Now the user has kind of no mess messing around with this and put a little bit like they've put some
text in here.
Now they will instantaneously get input or feedback the instant they start changing this thing around.
So in practice form renders pristine everybody's happy.
But as soon as you start messing around with it.
OK we're going to start being pretty aggressive in showing you some validation messages.
All right.
So I think that's about it for our form.
Everything is looking pretty darn good so far.
I think the last thing that we have to do inside of this is make sure that whenever we click the submit
button back here or down here at the bottom we actually submit this to our back end API.
We also need to make sure that we show a cancel button on here that the user can click to go back to
our list of posts.
So let's take care of both of those challenges in the next section.