In the last section we figured out how to wire up a custom field of our own to the fields component
provided to us from Reebok's farm.
Now that we've got this standalone survey field thing right here we can add in a little bit of styling
a label all that kind of good stuff to further customize the behavior of the survey field.
And then we can duplicate it four times inside of our survey form and show that four different fields
that we need to show.
So let's get to it.
The first thing I want to do is add in a label to the same label is going to label the inputs so the
user knows what text or what value they're attempting to enter here for the label.
We want this to be provided by the parent component.
So I don't want to like hard code in here.
Just you know I don't want to hard code and say oh yeah this is supposed to be the survey title because
remember I want to reuse this survey field component 4 times one for each of these fields.
So rather than hard coding the tax Servi title in here I want to make sure that when I place the field
component I can pass in a prop that customizes the title or the label that's in there.
So I'm going to assume that when this component is rendered it will be passed a prop called label.
Can receive that.
Also in my destructuring arguments list as label like so.
So now let's flip back over to our survey form and make sure that we pass in some prop to this component's
survey field with the correct label.
So to pass along some custom properties to our component survey field right here we can just add them
directly onto the field.
So if we add any type of custom prop to the field right here they will be automatically forwarded on
to the survey field for us.
So for example I can add on a label of survey title notice everything just jumped.
It's still the same code it just got reformatted Because line was really long.
Smeller I added on this property right here redux form or the field component will automatically forward
it on to my survey field component.
So the survey field will receive the label inputs or see the label Propp and then we will show that
inside of our component.
So see how we're doing now.
Great.
So here we go survey title showing up at the top.
Cool.
So I think that we can probably make a little bit more progress now.
I can now duplicate this field four times.
So that's four times now.
I've got four fields one two three and four.
And then all I have to do for each of these is customize the props that I'm passing to each of them.
So for the first field I definitely do want to show the survey title and let's go look at our diagram.
So the first field we survey title then the subject line then the email body and then the recipient
list.
So let's kind of massage the props in each of these to handle that.
So for the second field I'll give it a label of subject line for my name I'll give it just subject for
the third one.
We're going to do our email body as the field and then a name of just body and and for the fourth field
we'll do we simply symbiont list with the name of emails.
Cool.
So let's save this and we change back over we get our automatic refresh and here's our four different
customized components.
And so now we can enter text and each one must do something like serve a title subject line email body
recipient list.
And then I click submit again we see our consul log in it has the body email subject and title each
with the appropriate value.
Cool.
So that's looking pretty good.
Now one quick thing I want to mention because I'm staring at it right now on the screen you see a little
icon right here.
I get a lot of questions about this icon and why it shows up to be really clear.
This is my password manager last pass.
So it's a chrome plug in that I use to automatically manage all my different passwords.
Last Pass will sometimes inject itself onto the page and try to like help you with different forms.
So I just had this icon right here because of this chrome plug in.
So I want to mention that really quick.
So I get a lot of questions about it.
OK.
So now looking at the field again or looking at the form if we go back over to our field component or
see me survey form I'm looking at these four different fields and I really can't help but notice that
each and every one of these seems to be like awfully identical.
Right.
Like we've got four different fields.
They all have the same props just they sometimes have a slightly different label or name.
So this is kind of you know very bulky code is getting duplicated four times over.
And so I'm wondering if there's some way that we can kind of condense this all down to be a little bit
more concise than it is right now.
So let's take a quick break and then the next section when we come back we'll try to figure out whether
or not we can condense down all these different fields to be a little bit more concise than they are
right now.
So let's tackle that in the next section.