1
00:00:00,630 --> 00:00:07,960
In the last section we showed our same field component but rather than telling it to show a input tag.

2
00:00:08,310 --> 00:00:12,760
We told the field component to leave rendering of some HMO element to us.

3
00:00:12,780 --> 00:00:19,160
We would take care of it not the field to do so we passed our own component to the component product.

4
00:00:19,300 --> 00:00:25,620
And so now the field is relying upon us to show some component here that will somehow show a text input

5
00:00:25,620 --> 00:00:31,590
to the user and then pass whatever values the user enters into their back up to the field component.

6
00:00:31,590 --> 00:00:36,270
So right now we have the field we're telling the field that we're trying to enter some tests here.

7
00:00:36,270 --> 00:00:40,920
We've told it the name of the property that we're trying to record and we've also told it that instead

8
00:00:40,920 --> 00:00:46,660
of attempting to render text input itself it should rely upon us to do it ourselves.

9
00:00:46,660 --> 00:00:51,590
So now we're going to change on over to the survey field and figure out where to go from here.

10
00:00:51,870 --> 00:00:53,140
Inside the survey field.

11
00:00:53,160 --> 00:00:57,010
Remember this thing is now being rendered by that field Tac.

12
00:00:57,570 --> 00:01:03,570
So because it's been rendered by the field tag redux form has the ability to add on a whole big dump

13
00:01:03,570 --> 00:01:05,660
of props inside of this thing.

14
00:01:05,700 --> 00:01:10,760
So our survey field has a whole bunch of props being passed to it right now from redux form.

15
00:01:11,400 --> 00:01:16,560
Let's add on the props object as an argument here and then console log it out to get a better sense

16
00:01:16,560 --> 00:01:22,470
of what we have access to is going to cost like props and let's from inside the browser and see what

17
00:01:22,470 --> 00:01:23,090
we get.

18
00:01:25,190 --> 00:01:29,900
So now when this thing refreshes Here's my props object and you'll notice a couple of different properties

19
00:01:29,900 --> 00:01:31,160
inside of here.

20
00:01:31,160 --> 00:01:37,170
We've got a input property some metal property and some type of text.

21
00:01:37,490 --> 00:01:40,070
Let's take a closer look at input right here.

22
00:01:40,100 --> 00:01:44,120
Now when we look at input you're going to see a couple of different functions inside of your stuff like

23
00:01:44,360 --> 00:01:47,240
on blur on change on focus.

24
00:01:47,420 --> 00:01:53,050
If you look closely at these you'll realize that these are different event handlers.

25
00:01:53,390 --> 00:02:00,770
So redux form is automatically generating a bunch of form or to me a bunch of event handlers for us

26
00:02:00,770 --> 00:02:05,670
to pass along to the text input that we are rendering that we are going to generate ourselves.

27
00:02:05,990 --> 00:02:11,930
So if we take all the props on this input key right here they're being passed to us and just pass them

28
00:02:11,930 --> 00:02:18,320
along to the text input that we are showing inside of our field our survey field right here like this

29
00:02:18,320 --> 00:02:24,770
text and put that we're running ourselves redux FLARM will automatically watch for any changes or watch

30
00:02:24,770 --> 00:02:31,250
for this thing to be blurred or focused or get something dragged on it or whatever else any other type

31
00:02:31,250 --> 00:02:37,280
of event redux form will automatically intercept and record the value of that event for us.

32
00:02:37,280 --> 00:02:42,530
So again even though we are making our own custom component to past the field here we still get the

33
00:02:42,530 --> 00:02:47,420
benefit of not having to manually wire up and handle all the different values that are coming out of

34
00:02:47,420 --> 00:02:49,680
this text input right here.

35
00:02:49,700 --> 00:02:53,990
So with that in mind let's take that Propst input.

36
00:02:54,080 --> 00:02:57,340
So Propst input is the value that we really care about.

37
00:02:57,350 --> 00:03:01,910
That's where all these different event handlers from redux forum live and we want to pass them along

38
00:03:01,910 --> 00:03:06,670
toward text inputs right here now rather than say light props or input.

39
00:03:06,740 --> 00:03:12,710
This would be a great place to use a little bit of 60 structuring so that the argument up here rather

40
00:03:12,710 --> 00:03:18,200
than putting just props you can replace it with the parentheses some curly braces and then just the

41
00:03:18,200 --> 00:03:24,740
word input so that automatically looks onto the props object and it pulls off the input property and

42
00:03:24,740 --> 00:03:26,960
assigns it to a variable called input.

43
00:03:27,350 --> 00:03:32,330
So now that object that contains all these different callbacks that we want to communicate along to

44
00:03:32,330 --> 00:03:35,950
our text input are available on this object right here.

45
00:03:36,350 --> 00:03:41,960
So all we have to do is pass those along to the input to do so we're going to use some kind of interesting

46
00:03:41,960 --> 00:03:43,160
looking GSX.

47
00:03:43,160 --> 00:03:45,450
So let's write it out and we'll talk about what it does.

48
00:03:45,470 --> 00:03:54,290
I'm going to put curly braces and then dot dot dot inputs so this right here says hey look input we've

49
00:03:54,290 --> 00:03:59,660
got a big ole object right here with a lot of props that we want to pass to you but we don't want to

50
00:03:59,690 --> 00:04:02,330
pass it as like as specifically named property.

51
00:04:02,450 --> 00:04:07,480
We want you to just have this object in all the keys and values that are in it to do so.

52
00:04:07,550 --> 00:04:12,400
We put down the curly braces that dot dot dot input and that's pretty much it.

53
00:04:12,410 --> 00:04:16,610
So just to be clear doing this right here would have been totally equivalent to doing something like

54
00:04:16,890 --> 00:04:26,420
on blur equals input Doppler sieving input dot on blur and then on change equals and put Daut on change

55
00:04:26,660 --> 00:04:32,150
because remember the input tag the input element the input probably has all those different callback

56
00:04:32,150 --> 00:04:35,220
functions attached to it or all those different event handlers.

57
00:04:35,510 --> 00:04:39,770
So really we're just saving ourselves writing all this annoying stuff out by putting the DOT DOT DOT

58
00:04:39,800 --> 00:04:41,290
in put in here.

59
00:04:41,910 --> 00:04:42,450
OK.

60
00:04:42,680 --> 00:04:44,230
So that's looking pretty good.

61
00:04:44,240 --> 00:04:46,790
Let's now save this.

62
00:04:46,790 --> 00:04:49,840
We will change back over to the browser and again will tech.

63
00:04:49,850 --> 00:04:54,950
We'll put some text into this input and then press the submit button and see what console log we give

64
00:04:54,950 --> 00:04:56,120
our values now.

65
00:04:56,500 --> 00:04:58,970
So put some text in here or click submit.

66
00:04:58,970 --> 00:05:05,480
And when I do so I again see title which is the name of our field that we added and the value that we

67
00:05:05,480 --> 00:05:06,330
added in there.

68
00:05:06,560 --> 00:05:13,070
So we are successfully taking a bunch of event handlers from redux form wiring them up to our input

69
00:05:13,100 --> 00:05:17,050
elements and that input element is being rendered by the field.

70
00:05:17,090 --> 00:05:22,310
And so eventually all that information all those change events eventually get percolated back up to

71
00:05:22,310 --> 00:05:24,330
redox form for us.

72
00:05:24,330 --> 00:05:24,920
OK.

73
00:05:25,310 --> 00:05:31,990
So that is pretty much it for handling individual or making custom components with redux form.

74
00:05:32,000 --> 00:05:33,530
Let's take a quick break in the next.

75
00:05:33,530 --> 00:05:36,480
And then in the next section we're going to come back to the survey field.

76
00:05:36,560 --> 00:05:41,780
We'll add on some nice label on here a little bit of styling some other stuff.

77
00:05:41,780 --> 00:05:43,540
And make sure that everything is looking pretty good.

78
00:05:43,730 --> 00:05:46,400
So take a quick break and continue in the next section.