1
00:00:00,780 --> 00:00:06,210
All right we've got all of our different fields abstracted into the form fields start G-S file.

2
00:00:06,210 --> 00:00:11,400
Now we don't have to duplicate a lot of logic between the survey form and the survey form of view.

3
00:00:11,550 --> 00:00:13,560
So let's flip over to the survey form our view.

4
00:00:13,560 --> 00:00:19,110
We're going to import the form fields object or the form fields file and then inside of the component

5
00:00:19,140 --> 00:00:25,440
we will loop over that array and generate one div and one label for every single field that we have.

6
00:00:25,440 --> 00:00:26,600
So let's get to it.

7
00:00:26,640 --> 00:00:36,340
We'll start off by imports of form fields from form fields like so now rather than trying to put all

8
00:00:36,340 --> 00:00:39,910
the iteration logic directly into our GSX block right here.

9
00:00:40,030 --> 00:00:44,650
I think that will define all the different fields ahead of time or kind of like the rendered output

10
00:00:44,650 --> 00:00:45,810
of all of them ahead of time.

11
00:00:45,910 --> 00:00:49,570
And then insert them into the actual return statement right here.

12
00:00:49,570 --> 00:00:54,760
So again we could put all the rendering logic for the list and all that kind of stuff directly in here.

13
00:00:54,850 --> 00:00:56,170
But they would be pretty hard to read.

14
00:00:56,170 --> 00:00:58,430
So it's going to break out to be a separate thing.

15
00:00:58,850 --> 00:01:05,220
So right above the return statement will say Konst review fields and you'll know to some kind of just

16
00:01:05,230 --> 00:01:07,240
you know making up terms here as we go.

17
00:01:07,240 --> 00:01:12,670
We could certainly name this little bit differently you know review fields maybe field list whatever

18
00:01:12,670 --> 00:01:17,160
or whatever else whatever feels appropriate to you is going to work out just fine here.

19
00:01:17,840 --> 00:01:22,210
OK so then we will map with load ash over this array.

20
00:01:22,480 --> 00:01:29,850
So form fields and for every field we're going to return a little bit of GSX.

21
00:01:29,920 --> 00:01:31,840
And so we spoke a little bit about math in the past.

22
00:01:31,840 --> 00:01:36,330
Remember for every element within form fields we run this inner function.

23
00:01:36,460 --> 00:01:41,810
We return something and that's going to be placed into a new array that is assigned to review fields.

24
00:01:42,070 --> 00:01:43,810
Now again I'm using loadout shear.

25
00:01:43,810 --> 00:01:46,640
So remember we do have to import that at the top of the file.

26
00:01:46,760 --> 00:01:48,900
Let's take care of that right now.

27
00:01:49,850 --> 00:01:50,320
OK.

28
00:01:50,350 --> 00:01:54,700
And so now we can start to come straight on what we're going to actually return for every single field

29
00:01:54,700 --> 00:01:56,300
that we put together.

30
00:01:56,380 --> 00:01:59,120
So we're going to return a top level div..

31
00:01:59,230 --> 00:02:04,480
So this is going to contain everything within this particular kind of review element.

32
00:02:04,510 --> 00:02:12,560
And then inside if I want to have a label the label should have the fields label.

33
00:02:12,640 --> 00:02:14,350
Right so every field has a label.

34
00:02:14,350 --> 00:02:16,370
So in this case we want to take the label.

35
00:02:16,870 --> 00:02:22,900
So we'll take the field label Riemer field is coming from the field object that we're currently killer

36
00:02:22,990 --> 00:02:24,140
iterating over.

37
00:02:24,670 --> 00:02:31,480
And then underneath this place another div and inside of there we'll put the text of whatever the actual

38
00:02:31,480 --> 00:02:33,450
field value is.

39
00:02:33,610 --> 00:02:36,310
And so again this is going to be a little bit more complex.

40
00:02:36,340 --> 00:02:42,340
We know that our form values are object or the form values argument that is being passed to our component

41
00:02:42,340 --> 00:02:47,810
right here contains all the different fields or values that are coming out of our form.

42
00:02:47,830 --> 00:02:49,190
That is an object.

43
00:02:49,420 --> 00:02:53,310
The keys of that object contain the names of each field.

44
00:02:53,350 --> 00:02:58,600
So if we look at form values and then reference field dot name we'll actually get the value that we

45
00:02:58,600 --> 00:02:59,830
care about.

46
00:02:59,860 --> 00:03:09,570
So safe form values at field dot name like so OK so now we are producing our div.

47
00:03:09,590 --> 00:03:15,890
It contains the label and in theory the value that the user entered I'm going to now take this review

48
00:03:15,890 --> 00:03:22,370
Field's array that we just produced and I'll place it directly into our GSX blob down in the return

49
00:03:22,370 --> 00:03:30,380
statement and so going to put this right underneath the age 5 but above the back button will say review

50
00:03:30,380 --> 00:03:32,300
fields just place it right in here.

51
00:03:34,000 --> 00:03:38,290
That before we actually test this out inside the browser do remember that we are producing a list of

52
00:03:38,290 --> 00:03:42,940
elements right now and whenever we produce a list we need to make sure that every element has a unique

53
00:03:42,940 --> 00:03:43,610
key.

54
00:03:43,820 --> 00:03:48,530
So on a top level div inside the map function lets make sure we get a key in here.

55
00:03:48,760 --> 00:03:53,620
And again we can just use the fields name.

56
00:03:53,740 --> 00:03:58,510
Now before we test so one other quick thing you know now that I'm looking at this we're kind of seeing

57
00:03:58,510 --> 00:04:01,160
that we're duplicating the word field in here several times.

58
00:04:01,170 --> 00:04:06,670
So yeah I mean other case in which 60 structuring will be just a little helpful.

59
00:04:06,670 --> 00:04:13,060
So let's replace the field argument with a set of parentheses and the curly braces.

60
00:04:13,060 --> 00:04:17,350
And we're going to request the name and label properties out of there.

61
00:04:17,380 --> 00:04:21,900
So all we really care about that field object is the name and label properties.

62
00:04:22,180 --> 00:04:29,020
So now inside of our turn statement we can replace dot field or field dot excuse me with just a name

63
00:04:29,050 --> 00:04:30,900
or label like so.

64
00:04:31,480 --> 00:04:31,930
OK.

65
00:04:31,990 --> 00:04:33,630
Now I think we're ready says this.

66
00:04:33,800 --> 00:04:35,700
You know flip back over to my browser.

67
00:04:36,020 --> 00:04:37,790
It looks like I already got the refresh.

68
00:04:37,970 --> 00:04:48,640
OK here is my form I'll enter in my junk text or hit next and I get my nice confirmation screen where

69
00:04:48,640 --> 00:04:50,560
I can review all my different inputs.

70
00:04:50,560 --> 00:04:52,120
So this is looking pretty good.

71
00:04:52,210 --> 00:04:57,130
And of course we can still hit the back button and kind of toggle between the two and maybe even make

72
00:04:57,130 --> 00:04:57,780
changes.

73
00:04:57,860 --> 00:05:03,760
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

74
00:05:03,760 --> 00:05:07,840
can see Yup it appears that everything is very correctly updating over time.

75
00:05:07,990 --> 00:05:09,200
So this is looking pretty good.

76
00:05:09,400 --> 00:05:10,420
Let's take a quick break.

77
00:05:10,420 --> 00:05:11,820
We'll come back in the next section.

78
00:05:11,830 --> 00:05:16,180
We're going to start thinking about adding a submit button onto the right hand side of the form over

79
00:05:16,180 --> 00:05:16,510
here.

80
00:05:16,540 --> 00:05:20,620
Once the user is happy with all their inputs and will start thinking about exactly what we're going

81
00:05:20,620 --> 00:05:24,010
to do once the user actually submits their entry.

82
00:05:24,010 --> 00:05:25,480
So a catch in the next section.