All right we've got all of our different fields abstracted into the form fields start G-S file.
Now we don't have to duplicate a lot of logic between the survey form and the survey form of view.
So let's flip over to the survey form our view.
We're going to import the form fields object or the form fields file and then inside of the component
we will loop over that array and generate one div and one label for every single field that we have.
So let's get to it.
We'll start off by imports of form fields from form fields like so now rather than trying to put all
the iteration logic directly into our GSX block right here.
I think that will define all the different fields ahead of time or kind of like the rendered output
of all of them ahead of time.
And then insert them into the actual return statement right here.
So again we could put all the rendering logic for the list and all that kind of stuff directly in here.
But they would be pretty hard to read.
So it's going to break out to be a separate thing.
So right above the return statement will say Konst review fields and you'll know to some kind of just
you know making up terms here as we go.
We could certainly name this little bit differently you know review fields maybe field list whatever
or whatever else whatever feels appropriate to you is going to work out just fine here.
OK so then we will map with load ash over this array.
So form fields and for every field we're going to return a little bit of GSX.
And so we spoke a little bit about math in the past.
Remember for every element within form fields we run this inner function.
We return something and that's going to be placed into a new array that is assigned to review fields.
Now again I'm using loadout shear.
So remember we do have to import that at the top of the file.
Let's take care of that right now.
OK.
And so now we can start to come straight on what we're going to actually return for every single field
that we put together.
So we're going to return a top level div..
So this is going to contain everything within this particular kind of review element.
And then inside if I want to have a label the label should have the fields label.
Right so every field has a label.
So in this case we want to take the label.
So we'll take the field label Riemer field is coming from the field object that we're currently killer
iterating over.
And then underneath this place another div and inside of there we'll put the text of whatever the actual
field value is.
And so again this is going to be a little bit more complex.
We know that our form values are object or the form values argument that is being passed to our component
right here contains all the different fields or values that are coming out of our form.
That is an object.
The keys of that object contain the names of each field.
So if we look at form values and then reference field dot name we'll actually get the value that we
care about.
So safe form values at field dot name like so OK so now we are producing our div.
It contains the label and in theory the value that the user entered I'm going to now take this review
Field's array that we just produced and I'll place it directly into our GSX blob down in the return
statement and so going to put this right underneath the age 5 but above the back button will say review
fields just place it right in here.
That before we actually test this out inside the browser do remember that we are producing a list of
elements right now and whenever we produce a list we need to make sure that every element has a unique
key.
So on a top level div inside the map function lets make sure we get a key in here.
And again we can just use the fields name.
Now before we test so one other quick thing you know now that I'm looking at this we're kind of seeing
that we're duplicating the word field in here several times.
So yeah I mean other case in which 60 structuring will be just a little helpful.
So let's replace the field argument with a set of parentheses and the curly braces.
And we're going to request the name and label properties out of there.
So all we really care about that field object is the name and label properties.
So now inside of our turn statement we can replace dot field or field dot excuse me with just a name
or label like so.
OK.
Now I think we're ready says this.
You know flip back over to my browser.
It looks like I already got the refresh.
OK here is my form I'll enter in my junk text or hit next and I get my nice confirmation screen where
I can review all my different inputs.
So this is looking pretty good.
And of course we can still hit the back button and kind of toggle between the two and maybe even make
changes.
So I hit a hot Q There that was bad and maybe I'll change the email body or go back to next and you
can see Yup it appears that everything is very correctly updating over time.
So this is looking pretty good.
Let's take a quick break.
We'll come back in the next section.
We're going to start thinking about adding a submit button onto the right hand side of the form over
here.
Once the user is happy with all their inputs and will start thinking about exactly what we're going
to do once the user actually submits their entry.
So a catch in the next section.