I'm inside of our survey form component right now and inside of the render fields help helper method.
You'll notice we've got some awfully duplicated looking components in here.
So we've got four different fields in every single one of them have some awfully very similar looking
props some thinking that maybe we can figure out a nice clever way to maybe condense all this stuff
down to be a little bit more concise than is right now.
So here's my idea.
I think that we should create a array that kind of models out all the different fields that we expect
to have inside of this form.
Now explain this all with words.
I mean to be honest it's kind of challenging.
So we're going to kind of just dive into the implementation right here.
And I think as we start implementing it you'll get a much better sense of what's going on.
OK.
So above my survey form component I'm going to create an object called fields or see an array called
fields.
Now this is going to be like a true constant.
It's going to be a list.
I don't ever expect to change so I'm going to label it with capital fields to indicate hey don't change
this array.
Don't try to mess around with it inside of here.
I'm going to put out a couple of different objects.
Four in total.
One for each of the fields inside of our application and then inside of each of these objects I'm going
to put down the two properties that seem to change between every single field that we produce which
is the label and the name.
So when the first object of putting the label of Servais title and the name of title in the next one
I'll take the information from the second field of subject line and the name of subject.
So a label of subject line and a name of subject
on the third one will take email body and body so label email body and a name of body and then finally
for the last one.
And I know this is laborious recipient list in the name of emails
so label of recipient list a name of emails call now back inside of the render fields function right
you're going to just delete the return statement and all the GSX that's inside of there.
OK.
So we're left with just render fields empty function like so.
So here's our plan.
Rather than veery sequentially very imperatively listing out all the different fields that I want to
show inside of this form we are going to iterate over this array right here.
And for every single object in here we're going to create and return one custom field object that makes
use of the properties inside this object.
So all we're really doing here is kind of removing or kind of generalizing the changing props between
each of these fields and the whole right one function that can be used to always right or always create
any number of fields.
So long as they only have a label and a name.
Now to help us a little bit with the iteration over the fields object I'm going to import the load ash
library that we had installed earlier.
So remember import load ash from Lotus and underscore right here.
By convention we use that to identify the load Eshe library.
Now remember I had said previously loadout has a bunch of helper functions on it.
One of those helper functions is the map function which we can use to iterate over an array and then
return a new array consisting of a bunch of different records inside of it.
So let's see what that looks like inside the render fields function.
I'm going to put down a return statement and then underscore dot map over the fields array and then
for every field that I have I'm going to return one custom field.
Now this custom feel that we're creating right here is going to have a couple of different props that
we are just looking at a moment ago.
So we're going to have the components that's never going to change that's always going to be the survey
field.
We're going to have a type of text that's never going to change every single one of these as a type
of text then we're going to get a little bit more customized.
So we need to look at the field object right here.
Remember this is a map function.
So it's going to iterate over our list of fields and this arrow function right here will be called one
time for every object in the array.
So the first time it runs.
For some this function right here runs field will be equal to this object right here.
So we'll look at field dot label to get the label and field dot name to get the name.
So a label is field dot label and you know the instant I write that I start to recognize that we can
do a little bit of 60 structuring here.
So rather than receiving the entire field object lesson plus the two properties that we really care
about.
So put down a set of parentheses and then the curly braces to indicate that we want to do some restructuring
here and we'll say give me the label and give me the name off of these objects up here.
It's now inside of our GSX label it can become just label and then name can be just name like so now
I'm going to scroll out just a second so you can see the entire line.
There we go.
OK.
So again iterate over the list of fields for every object in there run this function one time.
Create a new custom field or new redux form fields and return it.
Everything that we returned from its inner function will be put into a brand new array that brand new
array will be returned by the map statement right here.
And then we will find the return that from the render fields function and it will be shown inside of
our render method right here.
So it's looking pretty good.
Let's flip back over to the browser and give us a little test.
So back over here it looks like we probably have a warning that's really fine we'll take care of that
in a second.
And it looks like everything's still working.
So if I understand text and click submit you still get all the different property names and all the
different values in here as well.
Now if we look a little bit closely at the warning that we're getting it's a very classic warning you'll
see inside of re-act anytime that you're creating a list of components.
So right now we've got our field component right here.
It is a list we've got a list of them.
Anytime we're showing a list like this.
We have to make sure that the field has a key property so that re-act can uniquely identify each of
the fields compounds that we're producing.
So really the only requirement of the key right here is that it is consistent between renderers and
that is unique between all the other keys that we're making use of.
And so I think that the name property out of the field is always going to be unique.
So I think that for the key.
Well just give it the name
OK.
So let's see what happens.
Now should get our refresh here.
There it is.
And now in our list of fields appears on the screen we don't have the warning anymore.
Awesome.
OK.
So at this point by the way remember the I run everything really zoomed in so you probably see something
it looks a little bit more like this case.
This is looking pretty great.
I think that we made a lot of progress on our fields.
Let's take a quick break and then continue in the next section.