That in the last section we took a look at the state form object and found all the values out of our
form inside there.
So now our survey form review component is being passed all the different values out of our form from
the redux store.
We can receive those values as props from the map say object by destructuring them out right here.
So we'll say form values.
Now I want to say I just took a real leap of faith right there and just kind of magically putting form
values right here and assuming that they're going to magically show up inside the component.
Remember whenever we call or whenever we define maps to props and pass it to the connect function whatever
we return we'll show up as props to our component.
So in other words this object right here is being passed as a prop to survey form of view that object
has a key form values.
And so we're going to pull it out of that prop's object right here.
So form values right here contains all the different values out of our field simiar form.
OK.
So now it's time to print these up inside the survey form a view component right.
Or any of the five we're going to place a div.
And this is going to be kind of a deeply nested div I'm using a lot of divs here to just kind of get
all the new lines to work correctly.
You'll see what it looks like in just a little bit.
So I want to print out.
Print out the first fields that I care about.
Now the first field that I really care about is probably going to be the survey title because remember
that was the first thing we showed on the form itself.
So I want to first print out the survey title so that the user can easily review it and say OK yeah
that's what I expected to.
Well that's why I had attempted to enter.
So inside of this first div that will be responsible for this first property we're printing out will
place a label with a text that will make it just match up.
So survey title and then another div underneath that to hold the actual value which is form values dot
and then the property name here is title remember the title property name is really being determined
from that field's object.
We had put together back inside the survey foot scudi the fields object we had put together inside the
survey form just nonstop tongue twisters here.
So the survey title was setting the title property.
So that's why we did specifically form values.
Title right here.
OK.
So let's say this and do a quick test to see how we're doing.
I'll change back to the browser.
There's a refresh entering some text
it next.
And very good.
We see the first value printing out here.
Now you might imagine where things can go from here.
Essentially we're saying that for every separate property we're going to copy paste this inner div right
here and paste it right here.
Now instead of serve a title I want to print out subject line which is going to be the subject property
of a form values.
I will duplicate it again change this one to be email body because that's the third field.
This will be body and you kind of get the idea.
Now when I look at this code right here I see some really repetitive stuff like this is super repetitive.
We have the same div over and over again.
In addition we have some values inside of each of these labels and divs right here that are very closely
tied to exactly what we had inside of that field's object that we had created inside of survey form.
So we have two problems right now.
We have some property names that are really being manually duplicated from this object right here from
this entire array of objects and we also have some very duplicated looking GSX right here as well.
Two big problems.
Now the reason that I think that first one is a problem at all.
You know the fact that we are duplicating the label name survey title and survey title right here is
that I can very easily imagine in a case in which some engineer says oh well you know what.
This isn't really called survey title anymore.
This is now called Campaign title.
And so maybe that engineer comes into the survey form component.
They update the fields object and they say OK that's pretty much it.
That's that's all I had to do.
They save this file to go look at the form and they say oh yeah that successfully got updated to campaign
title as we'll see here in just a second when it refreshes.
However that engineer might not know that as soon as you submit the form and go to the next step it's
going to show some text that's being displayed or pulled from this Toli other location inside of our
component structure or this completely different component.
So now really this should say campaign title as well.
Right.
I wouldn't really want to have that different terminology of campaign title there but then serve a title
here.
And so this is something that we can really fix by rather than duplicating or handwriting out all these
different divs we could somehow import this Field's object right here and then just as we iterated over
the fields object previously we could iterate over it again.
And inside that iteration kind of construct all these different divs to show to our user.
So I think that's going to go a long ways to solving a couple of different issues here.
Again we don't have to manually type all this stuff out and be subject to some brittleness or breakage
in the future.
And we also don't have to have all this duplicated GSX in here as well.
So let's give that a shot.
We're going to try to import that form or see that Fields object right here and then make use of it
inside of the survey form of the component as well.
Now to start we can do a little bit of cleanup inside of survey form of view.
I'm going to delete that entire big div that we just put together and I'm sorry if you type that all
up by hand.
I hope you copy pasted it like I did.
I apologize if you if you did not.
So at this point we've now got the survey form of view.
It wants to get access to some object or some array that is declared inside of survey form.
Now rather than export this Fields object from survey form and then somehow import it into survey form
view I'm thinking that this list of fields should really just be pulled out to a completely separate
file and then imported into both the survey form and survey form review.
OK.
So rather than try to leave this thing inside of this file and import it over to the other one I want
to just put it into a completely new file and then import it into both survey form and survey form review.
So let's make a new file inside the survey's directory as well.
I'm going to call this one form fieldstone genius.
Notice that again I'm using a lowercase tile here of form fields because I'm not exporting a component
or a component class or really just a class I'm exporting some simple property a simple array.
And so for that I'd choose to use a lowercase still camel case but lowercase leading character.
Downside if you're all we're doing is creating that list of fields and exporting them.
So we'll just lead right off with the export default.
I'm going to change back over to the survey form.
I'm going to take the array of cut it out of here.
I'm going to go back over to form fields and paste it.
I'll make sure I get a space in there too.
OK.
So now our form configuration like the field configuration is all centralized inside of this one file.
Now I can go back into the survey form I'm going to clean up that Konst statement that I left around
and I'm also going to import that field's object.
Now I'm going to assign it to capital fields in here as well because again it's kind of so constant
I don't really want to go and hunt down all the different uses I have of it.
It would be totally appropriate as well to just call it form fields in here.
And you know what.
I take it back let's do of form fields.
That's the right thing to do.
I wanted to leave it as capitals so that we didn't have to like go and find all of its uses in this
file which is kind of lazy of me.
So let's rename the sing to me form fields instead.
It still is a true constant but when we import a constant to another file we don't always carry along
that all capitals syntax as well.
OK so we're going to import this from form fields now going to make sure that anywhere we were referring
to capital fields inside of here we replace it with the new form fields.
So still the array of objects.
But now it's going to be just the slightly different name.
So I see one use right here will save form fields right away.
I'm going to do a quick scan through here and see if I used fields anywhere else.
Looks like down inside the validate function we use it here as well.
So here is that each where we were handling some validation.
I'll be sure to replace this capital F fields here with form fields as well.
I'm going to keep looking through and that's pretty much it.
OK so let's save this let's do a quick test inside the browser to make sure we didn't just break anything
with that refactor.
So wait for the refresh.
And yet it looks like everything is still working.
If I just click next I still have all the validation.
So at this point if you see any type of air inside your console that says like unknown variable capital
fields or something like that that means that you probably did not fix up the import statement.
You want to make sure that you pick up the change in variable name inside of render fields and the validate
function at the bottom as well.
So do triple check both of those.
OK so good refactoring the section.
We made a little bit of progress towards kind of generalizing the logic around all these fields.
Let's take a quick break.
When we come back we're going to import that object into the survey form review and make sure that we
use that list of fields to print out all the different inputs that the user added.
So quick break and I'll see you in just a second.