1
00:00:00,420 --> 00:00:05,550
I'm inside of our survey form component right now and inside of the render fields help helper method.

2
00:00:05,580 --> 00:00:09,400
You'll notice we've got some awfully duplicated looking components in here.

3
00:00:09,510 --> 00:00:14,400
So we've got four different fields in every single one of them have some awfully very similar looking

4
00:00:14,400 --> 00:00:20,310
props some thinking that maybe we can figure out a nice clever way to maybe condense all this stuff

5
00:00:20,310 --> 00:00:23,130
down to be a little bit more concise than is right now.

6
00:00:23,160 --> 00:00:24,540
So here's my idea.

7
00:00:24,540 --> 00:00:30,840
I think that we should create a array that kind of models out all the different fields that we expect

8
00:00:30,840 --> 00:00:33,270
to have inside of this form.

9
00:00:33,270 --> 00:00:34,740
Now explain this all with words.

10
00:00:34,740 --> 00:00:36,500
I mean to be honest it's kind of challenging.

11
00:00:36,660 --> 00:00:39,580
So we're going to kind of just dive into the implementation right here.

12
00:00:39,660 --> 00:00:43,750
And I think as we start implementing it you'll get a much better sense of what's going on.

13
00:00:43,810 --> 00:00:44,740
OK.

14
00:00:45,480 --> 00:00:52,860
So above my survey form component I'm going to create an object called fields or see an array called

15
00:00:52,860 --> 00:00:54,060
fields.

16
00:00:54,060 --> 00:00:56,210
Now this is going to be like a true constant.

17
00:00:56,250 --> 00:00:57,250
It's going to be a list.

18
00:00:57,280 --> 00:01:02,670
I don't ever expect to change so I'm going to label it with capital fields to indicate hey don't change

19
00:01:02,670 --> 00:01:03,280
this array.

20
00:01:03,300 --> 00:01:06,220
Don't try to mess around with it inside of here.

21
00:01:06,290 --> 00:01:08,600
I'm going to put out a couple of different objects.

22
00:01:08,730 --> 00:01:09,670
Four in total.

23
00:01:09,810 --> 00:01:15,600
One for each of the fields inside of our application and then inside of each of these objects I'm going

24
00:01:15,600 --> 00:01:22,050
to put down the two properties that seem to change between every single field that we produce which

25
00:01:22,050 --> 00:01:25,380
is the label and the name.

26
00:01:25,390 --> 00:01:35,470
So when the first object of putting the label of Servais title and the name of title in the next one

27
00:01:35,860 --> 00:01:41,660
I'll take the information from the second field of subject line and the name of subject.

28
00:01:41,710 --> 00:01:47,440
So a label of subject line and a name of subject

29
00:01:50,250 --> 00:02:02,830
on the third one will take email body and body so label email body and a name of body and then finally

30
00:02:02,830 --> 00:02:03,600
for the last one.

31
00:02:03,630 --> 00:02:08,550
And I know this is laborious recipient list in the name of emails

32
00:02:11,280 --> 00:02:22,820
so label of recipient list a name of emails call now back inside of the render fields function right

33
00:02:23,010 --> 00:02:27,820
you're going to just delete the return statement and all the GSX that's inside of there.

34
00:02:30,320 --> 00:02:30,600
OK.

35
00:02:30,620 --> 00:02:33,800
So we're left with just render fields empty function like so.

36
00:02:34,190 --> 00:02:35,360
So here's our plan.

37
00:02:35,360 --> 00:02:41,450
Rather than veery sequentially very imperatively listing out all the different fields that I want to

38
00:02:41,450 --> 00:02:46,040
show inside of this form we are going to iterate over this array right here.

39
00:02:46,250 --> 00:02:53,030
And for every single object in here we're going to create and return one custom field object that makes

40
00:02:53,030 --> 00:02:55,760
use of the properties inside this object.

41
00:02:55,760 --> 00:03:01,580
So all we're really doing here is kind of removing or kind of generalizing the changing props between

42
00:03:01,580 --> 00:03:07,550
each of these fields and the whole right one function that can be used to always right or always create

43
00:03:07,610 --> 00:03:08,830
any number of fields.

44
00:03:08,870 --> 00:03:12,120
So long as they only have a label and a name.

45
00:03:12,560 --> 00:03:17,520
Now to help us a little bit with the iteration over the fields object I'm going to import the load ash

46
00:03:17,560 --> 00:03:19,870
library that we had installed earlier.

47
00:03:19,950 --> 00:03:25,110
So remember import load ash from Lotus and underscore right here.

48
00:03:25,310 --> 00:03:29,120
By convention we use that to identify the load Eshe library.

49
00:03:29,120 --> 00:03:32,750
Now remember I had said previously loadout has a bunch of helper functions on it.

50
00:03:32,840 --> 00:03:38,660
One of those helper functions is the map function which we can use to iterate over an array and then

51
00:03:38,660 --> 00:03:43,080
return a new array consisting of a bunch of different records inside of it.

52
00:03:43,100 --> 00:03:47,080
So let's see what that looks like inside the render fields function.

53
00:03:47,120 --> 00:03:55,160
I'm going to put down a return statement and then underscore dot map over the fields array and then

54
00:03:55,160 --> 00:04:04,050
for every field that I have I'm going to return one custom field.

55
00:04:04,190 --> 00:04:08,510
Now this custom feel that we're creating right here is going to have a couple of different props that

56
00:04:08,510 --> 00:04:10,260
we are just looking at a moment ago.

57
00:04:10,520 --> 00:04:15,830
So we're going to have the components that's never going to change that's always going to be the survey

58
00:04:15,830 --> 00:04:16,570
field.

59
00:04:19,630 --> 00:04:23,650
We're going to have a type of text that's never going to change every single one of these as a type

60
00:04:23,650 --> 00:04:27,840
of text then we're going to get a little bit more customized.

61
00:04:27,970 --> 00:04:30,550
So we need to look at the field object right here.

62
00:04:30,640 --> 00:04:32,320
Remember this is a map function.

63
00:04:32,320 --> 00:04:37,270
So it's going to iterate over our list of fields and this arrow function right here will be called one

64
00:04:37,270 --> 00:04:40,000
time for every object in the array.

65
00:04:40,270 --> 00:04:41,560
So the first time it runs.

66
00:04:41,620 --> 00:04:46,900
For some this function right here runs field will be equal to this object right here.

67
00:04:46,930 --> 00:04:55,240
So we'll look at field dot label to get the label and field dot name to get the name.

68
00:04:55,240 --> 00:05:01,690
So a label is field dot label and you know the instant I write that I start to recognize that we can

69
00:05:01,690 --> 00:05:04,060
do a little bit of 60 structuring here.

70
00:05:04,270 --> 00:05:09,250
So rather than receiving the entire field object lesson plus the two properties that we really care

71
00:05:09,250 --> 00:05:10,010
about.

72
00:05:10,090 --> 00:05:15,340
So put down a set of parentheses and then the curly braces to indicate that we want to do some restructuring

73
00:05:15,340 --> 00:05:22,540
here and we'll say give me the label and give me the name off of these objects up here.

74
00:05:22,940 --> 00:05:34,420
It's now inside of our GSX label it can become just label and then name can be just name like so now

75
00:05:34,580 --> 00:05:38,210
I'm going to scroll out just a second so you can see the entire line.

76
00:05:38,220 --> 00:05:38,740
There we go.

77
00:05:39,560 --> 00:05:39,840
OK.

78
00:05:39,840 --> 00:05:46,890
So again iterate over the list of fields for every object in there run this function one time.

79
00:05:46,890 --> 00:05:51,700
Create a new custom field or new redux form fields and return it.

80
00:05:52,020 --> 00:05:57,810
Everything that we returned from its inner function will be put into a brand new array that brand new

81
00:05:57,810 --> 00:06:00,500
array will be returned by the map statement right here.

82
00:06:00,600 --> 00:06:05,160
And then we will find the return that from the render fields function and it will be shown inside of

83
00:06:05,160 --> 00:06:08,050
our render method right here.

84
00:06:08,100 --> 00:06:09,100
So it's looking pretty good.

85
00:06:09,240 --> 00:06:12,390
Let's flip back over to the browser and give us a little test.

86
00:06:12,400 --> 00:06:16,170
So back over here it looks like we probably have a warning that's really fine we'll take care of that

87
00:06:16,170 --> 00:06:17,540
in a second.

88
00:06:18,720 --> 00:06:20,560
And it looks like everything's still working.

89
00:06:20,670 --> 00:06:26,880
So if I understand text and click submit you still get all the different property names and all the

90
00:06:26,880 --> 00:06:28,970
different values in here as well.

91
00:06:28,980 --> 00:06:33,300
Now if we look a little bit closely at the warning that we're getting it's a very classic warning you'll

92
00:06:33,300 --> 00:06:37,050
see inside of re-act anytime that you're creating a list of components.

93
00:06:37,050 --> 00:06:40,250
So right now we've got our field component right here.

94
00:06:40,260 --> 00:06:42,280
It is a list we've got a list of them.

95
00:06:42,420 --> 00:06:43,920
Anytime we're showing a list like this.

96
00:06:43,920 --> 00:06:50,460
We have to make sure that the field has a key property so that re-act can uniquely identify each of

97
00:06:50,460 --> 00:06:52,860
the fields compounds that we're producing.

98
00:06:52,860 --> 00:06:57,660
So really the only requirement of the key right here is that it is consistent between renderers and

99
00:06:57,660 --> 00:07:01,310
that is unique between all the other keys that we're making use of.

100
00:07:01,350 --> 00:07:05,300
And so I think that the name property out of the field is always going to be unique.

101
00:07:05,310 --> 00:07:06,550
So I think that for the key.

102
00:07:06,750 --> 00:07:07,530
Well just give it the name

103
00:07:10,340 --> 00:07:10,800
OK.

104
00:07:10,820 --> 00:07:11,790
So let's see what happens.

105
00:07:11,780 --> 00:07:14,480
Now should get our refresh here.

106
00:07:14,480 --> 00:07:15,600
There it is.

107
00:07:15,710 --> 00:07:19,240
And now in our list of fields appears on the screen we don't have the warning anymore.

108
00:07:19,610 --> 00:07:20,480
Awesome.

109
00:07:20,990 --> 00:07:21,400
OK.

110
00:07:21,620 --> 00:07:25,550
So at this point by the way remember the I run everything really zoomed in so you probably see something

111
00:07:25,550 --> 00:07:28,450
it looks a little bit more like this case.

112
00:07:28,500 --> 00:07:29,500
This is looking pretty great.

113
00:07:29,510 --> 00:07:31,850
I think that we made a lot of progress on our fields.

114
00:07:31,850 --> 00:07:34,310
Let's take a quick break and then continue in the next section.