At the end of the last section we did a test of our application side the browser.
Now I've got a real big error message over here.
Chances are I really suspect that everything worked out appropriately for you.
So I was using a slightly out of date piece of software I just updated that everything's working now.
And so I guarantee you you're probably using the correct version.
So really a mistake on my site.
Anyways it looks like we got our input appearing on the screen correctly right now.
We can enter text in here and presumably.
I mean I don't know.
Presumably everything's working the way we expect.
So hopefully this value is getting reflected over the a redux form in some fashion.
For now I want to just continue on assuming that everything's working the way that we would expect.
And I want to add on a little bit more styling and CSSA to this thing right here to make it look a little
bit nicer.
After that we'll start working on some of the other fields components that we need inside of this page
and then we will do a final test and make sure that redux form is really doing the right thing for us
in regards to saving this on application level state and all that kind of good stuff.
So again we'll start off first by working on some of the styling.
This is supposed to be the title input for an individual blog post but right now the user really has
no reasonable way of figuring that out.
Right.
Like there's no label on here.
Nothing like that.
So we really need to figure out some way of adding in some additional styling to format that input a
little bit more nicely.
So that's really the job of the surrender title field function.
It's up to us to add in some amount of markup inside of here to make sure that we get a label in all
that kind of good stuff.
So let's use a little bit of bootstrap styling to improve the design on the dish that we're returning
in here.
Going out on a class name of form group and on the input all add on a class name of form control.
So let's save this and have it before we go and test it will still label as well.
So we'll give it a label of title again.
Let's test this.
So flip back over to the browser will do our refresh and OK.
All right that definitely is starting to look a little bit more reasonable.
We've got that title label and this is much more nicely formatted.
So I think this is looking pretty good so far.
Now that we have got a little bit better styling on here I would really like to make sure that we can
show not only the title field but also the input for the content and the tags that will be associated
with each blog post as well.
So to add in more fields it's as easy as adding any more field components underneath the existing title
or component or the existing title field I should say let's add on another field for our tags property.
So all of this fields and name of tags.
And then we will make a new function call this dot render tags field.
Again we're not going to add on the parentheses here at the end because we are passing in a function
just a reference to a function so that the field can read render itself multiple times.
Then we will specify the render tags field function as well.
So instead of saying we're going to end up with some markup that looks definitely very similar to the
title field function that we've already put together.
I mean really if you look back at the mockup that we have the mock up really again has the title label
as some input for categories.
We have the label and some input as well.
So really these two things are awfully identical in nature.
And so whenever you have two inputs or I should say two pieces of GSX that are starting to look very
similar.
You really want to start thinking about how to dry up your code or don't repeat yourself.
If we were to write out these two separate functions we would have a lot of duplicate logic.
So we need to figure out some way or at least I suggest it would be really nice if we could figure out
some way to just have a single render field function that will be responsible for rendering both the
title field and the tag's field.
So let's give this a shot.
Let's see if we can make it happen.
I mean to first start by deleting the rendered tags field function that we just put in here.
I'm going to rename the rendered title field function to just render field.
So because now it's going to be responsible for ending an arbitrary field as opposed to a specific one.
And then inside of our render function I can make sure that we're passing the component Propp of just
render field
OK.
So at this point in time if I save the file and I go back over to the browser I should be able to refresh
and see two identical titles by the way if we type into one here.
You'll notice that it's not reflected in the other.
Right now they're using the exact same piece or they're using different pieces of internal state.
Just a quick aside.
We'll talk more about that later.
OK.
So our goal right now is to generalize what render field is doing.
The big problem right now is that they both showed the title label.
So I think that if we really just update the label in some fashion in it or in some way then we'll be
in a pretty good spot to do so we can pass arbitrary properties to the field component itself and those
arbitrary properties will be passed along side of the field Propp or the field argument right here.
So let's see what that looks like in practice down on the field components all add on label.
And I'll say the label for the first one should be in title and the label for the second one should
be tag's then up inside of the render field function I'll replace the hardcoded title right here with
field dot label like so
again if we pass arbitrary properties like properties with any given name that we can possibly imagine
to this Field's component they will be automatically attached to that field argument inside of the render
field function.
So this does not have to be labeled right here as could be labeled to show or you know field title whatever
we really want we can be any property name that we so choose.
OK let's test this out now and see how we're doing.
So let's flip back over.
Refresh the page and now we correctly have title and tags separately.
So OK it looks like things are working out pretty well.
Now you might be curious as to why we provided the separate label when you've already got the name of
the field right here.
Well there's a very good reason for that.
Yes we could just capitalize the name of the field and say Oh yeah here is the label just capital-T
title.
We're good to go.
But you could easily imagine the case in which you would want a different label so we could end up wanting
the label or something like title for post or something like that.
So clearly the label of the field and the name property field might be very very different in nature.
And so that's why we're not going to try to reuse the name field.
So now if we go back over and refresh again title for post.
OK.
So this is looking pretty good.
The last field I want to add on here is the field for our content of the post to add that on.
It's going to be as easy as just adding on another field component.
We'll give it a label of post content a name of content and the component product will again be a reference
to the render field function like so OK.
So let's test this out.
And again we're looking pretty good.
You will notice I've got the little icon right here.
This is I get a lot of questions about why some of my inputs have these icons on the right hand side.
This is the password manager that I use I used last pass and last pass will sometimes I try to attach
itself to different inputs and see that if I press it it's going to start giving me a bunch of.
Here we go.
So like it's going to try to fill in the form for me.
Again this is a password manager that I use with Chrome.
So it's nothing specific to the application that we're working on.
All right.
So in this section we generalize the render field function and we added on three separate field components.
So this is looking pretty good.
The last thing we have to do is figure out how to actually submit this form and validate the input that
the users entered in here.
So let's take care of those challenges in the next section.