1
00:00:02,160 --> 00:00:09,570
We created a form which we simply set up in javascript then which we then handled dynamically with our own

2
00:00:09,570 --> 00:00:17,550
input component and our inputChangedHandler where we immutably update any effect that form elements,

3
00:00:17,550 --> 00:00:21,080
now let's make sure we can also submit this form.

4
00:00:21,330 --> 00:00:23,530
For that, we have the button with the clicked handler

5
00:00:23,550 --> 00:00:26,210
and I don't want to use to clicked handler,

6
00:00:26,220 --> 00:00:27,930
there actually is an

7
00:00:27,930 --> 00:00:35,220
onSubmit event handler we can use on the form itself. And there, I want to now execute the method we

8
00:00:35,220 --> 00:00:39,990
used for that, the orderHandler onSubmit.

9
00:00:40,350 --> 00:00:45,530
Now in the orderHandler, I now of course still want to prevent the default,

10
00:00:45,540 --> 00:00:49,320
we still get an event object here automatically passed by react.

11
00:00:49,320 --> 00:00:53,730
Now I want to prevent the default because I don't want to send the request automatically that would

12
00:00:53,730 --> 00:00:56,440
reload my page, instead

13
00:00:56,530 --> 00:00:58,810
I now need to extract the data

14
00:00:58,950 --> 00:01:05,040
I want to submit and the cool thing is all the data is already managed in this state, in our form object

15
00:01:05,040 --> 00:01:11,610
here, which is updated all the time with two way binding, the value is updated at least and the value is certainly

16
00:01:11,610 --> 00:01:13,140
what I'm interested in.

17
00:01:13,140 --> 00:01:14,430
I can create a new constant,

18
00:01:14,460 --> 00:01:22,920
let's maybe name it formData and there, I want to get the data from my state and I want to basically

19
00:01:22,920 --> 00:01:28,780
get my order form object here, though I don't care about the element type and the element config,

20
00:01:28,950 --> 00:01:33,800
I just want to get the name and then the value directly mapped to each other.

21
00:01:33,840 --> 00:01:42,960
So I will transform it a little bit, for this formData can be an empty object initially and then I'll

22
00:01:43,030 --> 00:01:45,520
loop through my form

23
00:01:45,520 --> 00:01:54,930
So there I'll have my form element identifier in this.state.orderForm,

24
00:01:55,030 --> 00:02:02,340
so this very long form element identifier is simply email, country and so on.

25
00:02:03,600 --> 00:02:11,670
And then, I want to set formData for a given form element identifier equal to this.state.orderForm

26
00:02:12,290 --> 00:02:16,400
for the form element identifier and there access the value.

27
00:02:16,440 --> 00:02:22,420
So I simply create key value pairs where I have, where I add a new property to form data,

28
00:02:22,620 --> 00:02:26,090
a property like country, like email and so on

29
00:02:26,250 --> 00:02:32,060
and I set the value of that property not equal to an object but simply to the value the user entered.

30
00:02:32,550 --> 00:02:35,490
And now with this, I have that simple mapping,

31
00:02:35,700 --> 00:02:38,570
I can now use that to submit it

32
00:02:38,640 --> 00:02:43,830
So here my formData, this is in the end what I want to pass

33
00:02:43,860 --> 00:02:49,720
so there I'll add an order data property to my order object and set this equal to formData.

34
00:02:50,100 --> 00:02:53,420
And now let's see if this works in the way I want it to work,

35
00:02:53,640 --> 00:02:56,400
let's also go to firebase for that.

36
00:02:56,420 --> 00:02:58,700
So I'm in firebase, here are my orders,

37
00:02:58,800 --> 00:03:04,190
let's now add a new order and see if that works. For that, I'll go through the full process,

38
00:03:04,260 --> 00:03:07,350
I'll create a burger, click order now,

39
00:03:07,360 --> 00:03:11,770
continue, continue here and then set up some data

40
00:03:11,770 --> 00:03:21,290
here, street, zipcode, some random code, United States maybe test@test.com

41
00:03:21,580 --> 00:03:24,480
Let's pick cheapest here and click order,

42
00:03:24,790 --> 00:03:28,480
we are redirected, let's now have a look at firebase, a new order was added

43
00:03:28,630 --> 00:03:33,370
and then, we have ordered data where we indeed have all these mappings where we have the data the user

44
00:03:33,370 --> 00:03:38,630
entered. So submitting the form works just fine and in a very dynamic way,

45
00:03:38,650 --> 00:03:40,980
look how easy it is to add a new input.

46
00:03:40,990 --> 00:03:47,050
You simply add a new property to your order form in the state, set up the element type, configure it

47
00:03:47,060 --> 00:03:51,170
here and assign a value and you quickly added a new input.

48
00:03:51,190 --> 00:03:58,090
And of course since this is in the state, you can even manipulate this order form immutably at runtime,

49
00:03:58,240 --> 00:04:05,230
so you can dynamically add new properties, enhance new inputs or remove them or change the configuration.

50
00:04:05,230 --> 00:04:09,150
That is why such a dynamic way of creating a form is so awesome.