1
00:00:00,660 --> 00:00:05,370
In the last section we figured out how to wire up a custom field of our own to the fields component

2
00:00:05,400 --> 00:00:07,490
provided to us from Reebok's farm.

3
00:00:07,560 --> 00:00:12,540
Now that we've got this standalone survey field thing right here we can add in a little bit of styling

4
00:00:12,600 --> 00:00:16,880
a label all that kind of good stuff to further customize the behavior of the survey field.

5
00:00:17,010 --> 00:00:22,050
And then we can duplicate it four times inside of our survey form and show that four different fields

6
00:00:22,050 --> 00:00:23,150
that we need to show.

7
00:00:23,490 --> 00:00:25,400
So let's get to it.

8
00:00:25,470 --> 00:00:30,990
The first thing I want to do is add in a label to the same label is going to label the inputs so the

9
00:00:30,990 --> 00:00:35,770
user knows what text or what value they're attempting to enter here for the label.

10
00:00:35,820 --> 00:00:38,640
We want this to be provided by the parent component.

11
00:00:38,670 --> 00:00:41,130
So I don't want to like hard code in here.

12
00:00:41,250 --> 00:00:47,490
Just you know I don't want to hard code and say oh yeah this is supposed to be the survey title because

13
00:00:47,490 --> 00:00:52,170
remember I want to reuse this survey field component 4 times one for each of these fields.

14
00:00:52,380 --> 00:00:57,450
So rather than hard coding the tax Servi title in here I want to make sure that when I place the field

15
00:00:57,450 --> 00:01:03,750
component I can pass in a prop that customizes the title or the label that's in there.

16
00:01:03,750 --> 00:01:11,290
So I'm going to assume that when this component is rendered it will be passed a prop called label.

17
00:01:11,460 --> 00:01:12,420
Can receive that.

18
00:01:12,420 --> 00:01:17,070
Also in my destructuring arguments list as label like so.

19
00:01:17,070 --> 00:01:22,940
So now let's flip back over to our survey form and make sure that we pass in some prop to this component's

20
00:01:22,940 --> 00:01:25,160
survey field with the correct label.

21
00:01:25,680 --> 00:01:31,020
So to pass along some custom properties to our component survey field right here we can just add them

22
00:01:31,020 --> 00:01:32,880
directly onto the field.

23
00:01:33,150 --> 00:01:38,520
So if we add any type of custom prop to the field right here they will be automatically forwarded on

24
00:01:38,520 --> 00:01:40,290
to the survey field for us.

25
00:01:40,290 --> 00:01:50,640
So for example I can add on a label of survey title notice everything just jumped.

26
00:01:50,640 --> 00:01:53,910
It's still the same code it just got reformatted Because line was really long.

27
00:01:53,960 --> 00:01:59,510
Smeller I added on this property right here redux form or the field component will automatically forward

28
00:01:59,510 --> 00:02:01,780
it on to my survey field component.

29
00:02:01,820 --> 00:02:07,070
So the survey field will receive the label inputs or see the label Propp and then we will show that

30
00:02:07,160 --> 00:02:08,660
inside of our component.

31
00:02:08,990 --> 00:02:10,190
So see how we're doing now.

32
00:02:11,690 --> 00:02:12,010
Great.

33
00:02:12,050 --> 00:02:15,360
So here we go survey title showing up at the top.

34
00:02:15,630 --> 00:02:16,020
Cool.

35
00:02:16,040 --> 00:02:19,730
So I think that we can probably make a little bit more progress now.

36
00:02:20,090 --> 00:02:24,020
I can now duplicate this field four times.

37
00:02:26,080 --> 00:02:27,430
So that's four times now.

38
00:02:27,490 --> 00:02:31,010
I've got four fields one two three and four.

39
00:02:31,150 --> 00:02:36,910
And then all I have to do for each of these is customize the props that I'm passing to each of them.

40
00:02:36,910 --> 00:02:41,540
So for the first field I definitely do want to show the survey title and let's go look at our diagram.

41
00:02:41,560 --> 00:02:47,500
So the first field we survey title then the subject line then the email body and then the recipient

42
00:02:47,500 --> 00:02:48,250
list.

43
00:02:48,250 --> 00:02:52,410
So let's kind of massage the props in each of these to handle that.

44
00:02:52,420 --> 00:03:05,810
So for the second field I'll give it a label of subject line for my name I'll give it just subject for

45
00:03:05,810 --> 00:03:07,170
the third one.

46
00:03:07,550 --> 00:03:16,790
We're going to do our email body as the field and then a name of just body and and for the fourth field

47
00:03:17,660 --> 00:03:24,990
we'll do we simply symbiont list with the name of emails.

48
00:03:26,370 --> 00:03:26,590
Cool.

49
00:03:26,770 --> 00:03:35,890
So let's save this and we change back over we get our automatic refresh and here's our four different

50
00:03:35,950 --> 00:03:37,450
customized components.

51
00:03:37,450 --> 00:03:46,300
And so now we can enter text and each one must do something like serve a title subject line email body

52
00:03:46,930 --> 00:03:48,330
recipient list.

53
00:03:48,500 --> 00:03:54,490
And then I click submit again we see our consul log in it has the body email subject and title each

54
00:03:54,490 --> 00:03:56,090
with the appropriate value.

55
00:03:56,110 --> 00:03:56,400
Cool.

56
00:03:56,400 --> 00:03:57,680
So that's looking pretty good.

57
00:03:58,120 --> 00:04:02,290
Now one quick thing I want to mention because I'm staring at it right now on the screen you see a little

58
00:04:02,290 --> 00:04:03,060
icon right here.

59
00:04:03,070 --> 00:04:06,670
I get a lot of questions about this icon and why it shows up to be really clear.

60
00:04:06,670 --> 00:04:09,160
This is my password manager last pass.

61
00:04:09,400 --> 00:04:13,220
So it's a chrome plug in that I use to automatically manage all my different passwords.

62
00:04:13,360 --> 00:04:19,340
Last Pass will sometimes inject itself onto the page and try to like help you with different forms.

63
00:04:19,390 --> 00:04:22,350
So I just had this icon right here because of this chrome plug in.

64
00:04:22,360 --> 00:04:23,890
So I want to mention that really quick.

65
00:04:23,890 --> 00:04:25,910
So I get a lot of questions about it.

66
00:04:26,720 --> 00:04:27,010
OK.

67
00:04:27,040 --> 00:04:32,890
So now looking at the field again or looking at the form if we go back over to our field component or

68
00:04:33,100 --> 00:04:38,470
see me survey form I'm looking at these four different fields and I really can't help but notice that

69
00:04:38,830 --> 00:04:42,510
each and every one of these seems to be like awfully identical.

70
00:04:42,550 --> 00:04:43,380
Right.

71
00:04:43,450 --> 00:04:45,430
Like we've got four different fields.

72
00:04:45,430 --> 00:04:52,150
They all have the same props just they sometimes have a slightly different label or name.

73
00:04:52,180 --> 00:04:57,280
So this is kind of you know very bulky code is getting duplicated four times over.

74
00:04:57,280 --> 00:05:01,570
And so I'm wondering if there's some way that we can kind of condense this all down to be a little bit

75
00:05:01,570 --> 00:05:03,820
more concise than it is right now.

76
00:05:03,880 --> 00:05:08,140
So let's take a quick break and then the next section when we come back we'll try to figure out whether

77
00:05:08,140 --> 00:05:12,670
or not we can condense down all these different fields to be a little bit more concise than they are

78
00:05:12,670 --> 00:05:13,360
right now.

79
00:05:13,600 --> 00:05:15,290
So let's tackle that in the next section.