1
00:00:00,900 --> 00:00:06,310
In the last video we hooked up these two field components to the new render input function.

2
00:00:06,470 --> 00:00:11,860
Anytime time that the field component called render input it also passed in a set of properties that

3
00:00:11,860 --> 00:00:15,410
we took and passed along to the text input inside of your screen.

4
00:00:15,460 --> 00:00:20,200
Remember the running theme with redux form is that it's going to do all this stuff for us automatically

5
00:00:20,440 --> 00:00:26,650
and it's up to us just to wire up this last little step right here to take whatever handlers or values

6
00:00:26,830 --> 00:00:31,840
that are provided by redux form and make sure that we actually wire them up to some meaningful input.

7
00:00:31,840 --> 00:00:36,370
Now in this video we're going to continue working on our render input function right here.

8
00:00:36,370 --> 00:00:41,200
So at present we have our inputs with dot.com input when that shows up on the screen.

9
00:00:41,230 --> 00:00:45,000
We get this really ugly input right here like there's no label on there.

10
00:00:45,150 --> 00:00:49,000
They're the two inputs are right next to each other and it's really tough for a user to figure out what's

11
00:00:49,000 --> 00:00:50,210
going on.

12
00:00:50,230 --> 00:00:56,530
So rather than just returning a text input right here we can actually return an entire blob of GSX.

13
00:00:56,560 --> 00:01:01,720
So like a couple of different elements we are not restricted to just returning the one single input

14
00:01:01,720 --> 00:01:02,690
by itself.

15
00:01:03,060 --> 00:01:05,980
So I'm going to again turn this into a multi-line expression.

16
00:01:06,010 --> 00:01:07,810
Sorry for going back and forth.

17
00:01:07,870 --> 00:01:12,760
Remember to clean up the semi-colon on the right hand side of the input and then I'm going to wrap this

18
00:01:13,060 --> 00:01:16,820
with a div that has a class name of field.

19
00:01:21,350 --> 00:01:26,220
And then above it I'm going to put in a label tag because we probably want to tell the user what actual

20
00:01:26,400 --> 00:01:28,010
input this represents.

21
00:01:28,100 --> 00:01:34,020
I remember the render input function is going to be called two times one time by our field or title

22
00:01:34,080 --> 00:01:36,580
and one time by our field for description.

23
00:01:36,600 --> 00:01:40,980
So when we put our label inside of here we need to make sure that we know which field we are currently

24
00:01:40,980 --> 00:01:42,180
going to be working on.

25
00:01:42,540 --> 00:01:48,090
So to get that appropriate fields we can add on or the appropriate title of the field I should say we

26
00:01:48,090 --> 00:01:52,230
can add on an additional Propp to both of these field elements.

27
00:01:52,230 --> 00:02:00,240
So on the first field I'm going to add on a prop of label and for the first one I'll put in her title

28
00:02:02,300 --> 00:02:11,150
and then on the second one I'll put in a label of enter description like so anytime that we add in some

29
00:02:11,150 --> 00:02:17,150
props to our field components right here redux form is going to see that we have passed in some prop

30
00:02:17,150 --> 00:02:19,180
that it doesn't know what to do with.

31
00:02:19,190 --> 00:02:23,560
In other words that field element has no idea what to do with a label prop.

32
00:02:23,600 --> 00:02:29,030
So the field element by default is just going to take that prop and pass it through to the render input

33
00:02:29,030 --> 00:02:29,870
function.

34
00:02:29,870 --> 00:02:34,430
So this is how we can customize the render input function when ever it gets called we can just add on

35
00:02:34,490 --> 00:02:37,240
additional props to the field element.

36
00:02:37,250 --> 00:02:41,840
So now because we passed in this prop that the field component doesn't know about it's going to be passed

37
00:02:41,840 --> 00:02:47,600
in to render input and we can receive that as an additional property on that first argument.

38
00:02:47,600 --> 00:02:52,310
So I can now reference this label property and restructure it out of that object that gets passed in

39
00:02:52,310 --> 00:02:53,950
as the first argument.

40
00:02:54,140 --> 00:03:00,970
And now inside my label right here I can print up label like the cell save this and we'll flip back

41
00:03:00,970 --> 00:03:01,450
over.

42
00:03:01,540 --> 00:03:05,050
And now we can see that we correctly get our label appearing on the screen.

43
00:03:05,050 --> 00:03:06,670
All right cell looks pretty good.

44
00:03:06,870 --> 00:03:10,470
Now I say that it looks pretty good but it doesn't really look perfect.

45
00:03:10,480 --> 00:03:13,990
We really don't want the text to be right next to each input.

46
00:03:14,050 --> 00:03:18,610
So to fix that up we can just add on a quick class name to our form element right here.

47
00:03:18,970 --> 00:03:22,570
So I can put on a class name of UI form like so.

48
00:03:22,570 --> 00:03:27,460
And then once I do that I'll see the nice form appear that looks a lot better right there.

49
00:03:27,850 --> 00:03:28,110
OK.

50
00:03:28,120 --> 00:03:29,610
So this is looking pretty good.

51
00:03:29,680 --> 00:03:33,730
So now we have the ability to show the form in all the different fields that we want and we could put

52
00:03:33,730 --> 00:03:36,440
in some title and description inside of here.

53
00:03:36,490 --> 00:03:41,140
Now the last thing we need to start to think about is how we can submit this form and get some callback

54
00:03:41,500 --> 00:03:46,210
that says hey the form is just submitted so that you and I can try to create a new stream or whatever

55
00:03:46,210 --> 00:03:47,650
it is we are trying to do.

56
00:03:47,650 --> 00:03:49,900
So let's start to figure that out in the next video.