1
00:00:02,160 --> 00:00:05,060
So in the last lecture we got some basic styling for our form,

2
00:00:05,080 --> 00:00:08,230
we also fixed that error though I'll revisit that.

3
00:00:08,230 --> 00:00:14,710
Now let's find a way to create our form dynamically and to clearly define how each element should look

4
00:00:14,710 --> 00:00:15,430
like.

5
00:00:15,430 --> 00:00:20,470
For that I'll have a look at the data I actually want to pass with the order, get some customer data

6
00:00:20,470 --> 00:00:24,070
like the name and address and then we get this delivery method,

7
00:00:24,070 --> 00:00:29,260
this could be a drop down where we can choose between fastest and cheapest or something like that.

8
00:00:29,260 --> 00:00:38,080
So for that, let's say you want to store or handle this form shape basically and all the element data

9
00:00:38,260 --> 00:00:45,580
in our state, there we could have the order form property which should be a javascript object

10
00:00:45,730 --> 00:00:50,870
and in this javascript object, I now wanted to define all the form fields, so all the inputs,

11
00:00:51,040 --> 00:00:54,180
how they should be configured and their values.

12
00:00:54,460 --> 00:01:00,160
So now I will grab my set up from down there with the customer and the delivery method, delete these

13
00:01:00,160 --> 00:01:06,580
fields from the Order object for now and add them to the order form. Now I want to flatten this so that I

14
00:01:06,580 --> 00:01:09,520
just have all the inputs I want to have,

15
00:01:09,520 --> 00:01:12,330
so I get rid of customer and of address,

16
00:01:12,340 --> 00:01:15,780
so of these nested properties here,

17
00:01:15,790 --> 00:01:22,860
so that now, we just have some properties in the order form where each property represents one input

18
00:01:22,860 --> 00:01:24,650
I want to create.

19
00:01:24,990 --> 00:01:32,050
Now the goal is to also define how this input should look like so that we can really go through this object dynamically

20
00:01:32,050 --> 00:01:37,570
that we could even add elements dynamically and create a fitting input element.

21
00:01:37,570 --> 00:01:42,200
For that, I want to have an element type property for each element

22
00:01:42,490 --> 00:01:44,380
and this should be a normal input element.

23
00:01:44,380 --> 00:01:51,910
Here we should use normal html tags basically, without the lower and the greater than sign, just a tag

24
00:01:51,910 --> 00:01:57,490
name. Then let's say we want to have an element config and the names of these properties are of course

25
00:01:57,520 --> 00:01:58,790
totally up to you.

26
00:01:59,030 --> 00:02:05,060
The element config here could define the configuration, the normal attributes

27
00:02:05,110 --> 00:02:08,680
we can set up for the chosen html tag.

28
00:02:09,010 --> 00:02:12,040
So here, that could be a type which should be text,

29
00:02:12,040 --> 00:02:15,710
we could set up the placeholder here too which could be your name.

30
00:02:15,760 --> 00:02:21,670
This will be what I want to distribute over the created input and then let's say we also want to have

31
00:02:21,670 --> 00:02:23,500
a value for the name,

32
00:02:23,710 --> 00:02:31,120
the value here could simply be Maximillian or of course an empty value at the beginning, and that's it

33
00:02:31,120 --> 00:02:31,830
for now

34
00:02:31,930 --> 00:02:38,380
and this is a pattern I now want to repeat for all the elements. And you could of course write a bit

35
00:02:38,380 --> 00:02:44,830
leaner code, you could create a helper function which creates such a javascript object so that here

36
00:02:44,830 --> 00:02:48,010
you call just a function which initializes it,

37
00:02:48,100 --> 00:02:52,090
I'll write this in the long form to make it really clear what's happening here

38
00:02:52,180 --> 00:02:55,730
even though that will bloat our class for the moment.

39
00:02:56,230 --> 00:02:58,810
So street should also be input element text

40
00:02:59,170 --> 00:03:04,980
and then here, I'll just input street like this, value could also be empty.

41
00:03:05,230 --> 00:03:09,670
The zip code, same game, input of type text,

42
00:03:09,670 --> 00:03:15,520
you could of course enter type number here but maybe you want to leave this zipcode as a text so that

43
00:03:15,520 --> 00:03:22,060
users can also enter codes with some characters in them somewhere where this would be necessary.

44
00:03:22,060 --> 00:03:25,440
So here I'll add zipcode as a placeholder,

45
00:03:27,110 --> 00:03:32,780
the country, well here you could of course use a dropdown but I'll also use a text input here so that

46
00:03:32,810 --> 00:03:38,390
we can accept any country because having a dropdown with restricted countries, implementing that is

47
00:03:38,390 --> 00:03:42,860
a bit more complex and you would probably use some third party package for that.

48
00:03:42,860 --> 00:03:44,010
And then the e-mail,

49
00:03:44,030 --> 00:03:46,680
last but not least, here the type could be email

50
00:03:46,700 --> 00:03:50,890
so the default html type email, you can assign to input

51
00:03:51,020 --> 00:03:55,070
and here, you can say your mail or e-mail actually.

52
00:03:55,070 --> 00:03:56,910
So with that we get this set up,

53
00:03:56,920 --> 00:04:03,410
now the delivery method should of course also get such object, here the elements type however should

54
00:04:03,440 --> 00:04:12,800
be as select and there the element config should of course also have some elements but not the type,

55
00:04:12,800 --> 00:04:14,660
not the placeholder,

56
00:04:14,660 --> 00:04:18,970
here we could say we want to define the options we want to have, and options

57
00:04:18,980 --> 00:04:25,520
then of course should be an array and then we could enter javascript objects again where we have the

58
00:04:26,210 --> 00:04:33,870
value that could be something like fastest and the display value which could be fastest like this

59
00:04:33,890 --> 00:04:38,060
and of course, you can also fine tune this configuration to your exact needs,

60
00:04:38,060 --> 00:04:40,830
I'm just showing some examples here.

61
00:04:40,890 --> 00:04:50,720
So here we could then have of course a second option which is cheapest and here it's cheapest,

62
00:04:50,760 --> 00:04:53,130
so this could be my delivery method set up.

63
00:04:53,130 --> 00:04:59,520
So now we get this quite long order form with all the key value pairs where we have some identifiers

64
00:04:59,580 --> 00:05:01,790
of our different form elements basically

65
00:05:01,920 --> 00:05:05,070
and then a javascript object with the configuration set up,

66
00:05:05,220 --> 00:05:12,330
and now let's adjust our input element to well be able to work together with that so that we can then

67
00:05:12,450 --> 00:05:19,680
dynamically create these inputs by just looping through our well object here, which of course we have

68
00:05:19,680 --> 00:05:21,470
to transform in an array for that.

69
00:05:21,660 --> 00:05:23,890
But let's start by adjusting the input element,

70
00:05:24,060 --> 00:05:26,140
I'll do this in this lecture too.

71
00:05:26,370 --> 00:05:34,350
So there, we probably want to pass something like let's have a look, like we want to pass the type and

72
00:05:34,350 --> 00:05:36,600
the config and the value,

73
00:05:36,690 --> 00:05:45,630
so we should do this. Let's remove type name placeholder here, let's simply pass the element type here

74
00:05:45,960 --> 00:05:52,500
which should be something, the element config and we don't need to write this lowercase because

75
00:05:52,500 --> 00:05:59,910
I will change the way I distribute props on the created element and then also, the value which is something

76
00:06:00,210 --> 00:06:03,260
of course real values will be added soon.

77
00:06:03,300 --> 00:06:06,800
Then let's go into our input element and in there,

78
00:06:06,930 --> 00:06:09,320
now we receive different props.

79
00:06:09,480 --> 00:06:13,980
We have the element type where I still want to use my switch statement

80
00:06:14,340 --> 00:06:23,120
but then I no longer distribute all props, I just distribute props and there, this element config property

81
00:06:23,190 --> 00:06:24,310
I just set up.

82
00:06:24,390 --> 00:06:30,970
So this property which of course in the end should receive the element config set up for a given input

83
00:06:30,990 --> 00:06:36,130
in our state, and there if we then distribute the props, these are the default

84
00:06:36,150 --> 00:06:42,550
html attribute names and that is of course important that you use them inside element config,

85
00:06:42,570 --> 00:06:44,180
the default names.

86
00:06:44,610 --> 00:06:48,770
So with that, we got this set up, we got the input element

87
00:06:48,930 --> 00:06:55,220
adjusted here, of course I also want to add value to each input element,

88
00:06:55,260 --> 00:07:03,130
so I will add in my input component, add the value property there and bind this to props.value so that

89
00:07:03,150 --> 00:07:04,990
this is also received here.

90
00:07:05,780 --> 00:07:11,780
And now I'll simply wrap all these properties over multiple lines for the created elements so that

91
00:07:11,780 --> 00:07:21,010
it's a bit easier to understand and read and with that, we get the input element, our custom input component

92
00:07:21,020 --> 00:07:24,420
I should say which hopefully works. In the next lecture,

93
00:07:24,430 --> 00:07:32,230
I now want to use our javascript form data we configured as a state to create the real input elements

94
00:07:32,230 --> 00:07:32,880
with it.