1
00:00:02,430 --> 00:00:09,690
Let's move on to the contact data page and there we have a class-based component, so let's change that

2
00:00:09,930 --> 00:00:15,270
to a constant contactData which holds our functional component that receives the props

3
00:00:15,300 --> 00:00:21,800
and here we're managing state and actually quite a big state object but this is not really a problem.

4
00:00:21,810 --> 00:00:27,930
The only interesting thing here is that in this state object, we have one large piece of state, that is

5
00:00:27,930 --> 00:00:31,570
related to our orderForm with the validity and so on

6
00:00:31,800 --> 00:00:38,270
and then we have an additional field which simply contains the overall validity of the form.

7
00:00:38,280 --> 00:00:46,050
Now we could leave it all in this one super big state object but with the useState hook, it is actually

8
00:00:46,050 --> 00:00:52,350
better and you should import that, it is actually better to split this into two state objects or two

9
00:00:52,440 --> 00:00:53,640
state pieces.

10
00:00:53,640 --> 00:00:55,070
Now why is that better?

11
00:00:55,080 --> 00:01:00,870
It simply can make it easier to manage your application if you split state into chunks

12
00:01:00,870 --> 00:01:05,970
and obviously you could also split the overall orderForm here into chunks so that you have one state

13
00:01:05,970 --> 00:01:13,380
for the name control, one for the street control, one for the zip control but to keep the logic we already

14
00:01:13,380 --> 00:01:22,300
wrote where I do actually dynamically go through my state object and access different fields for different

15
00:01:22,590 --> 00:01:30,100
inputs that were used, to keep that, I will actually not break this large state object into smaller pieces,

16
00:01:30,180 --> 00:01:37,500
I'll just construct two different state pieces, one for the orderForm and one for the overall form validity which is

17
00:01:37,500 --> 00:01:40,540
actually right now stored in here.

18
00:01:40,590 --> 00:01:48,900
So for that, let's useState here and pass in that large object with the name field, with the street field

19
00:01:48,990 --> 00:01:50,280
and so on,

20
00:01:50,310 --> 00:01:55,770
so all the way down right before here and close it before formIsValid

21
00:01:56,010 --> 00:02:01,710
and then let's also useState and pass in false and then get rid of formIsValid. You could of course

22
00:02:01,710 --> 00:02:06,510
also manage an object here that contains formIsValid and then the value false or true

23
00:02:06,510 --> 00:02:11,600
but since we just need add value, we can also just manage that value standalone in here.

24
00:02:11,610 --> 00:02:22,170
Here I will extract two fields, formIsValid and setFormIsValid and for our large

25
00:02:22,170 --> 00:02:30,540
state up there, we also need to extract the state values. Here the constants I'll extract, I'll name them

26
00:02:30,540 --> 00:02:34,940
orderForm and setOrderForm.

27
00:02:34,970 --> 00:02:40,060
So now we have useState in place managing our form state,

28
00:02:40,070 --> 00:02:47,450
let's now go down to the orderHandler and in the places where we access this state orderForm, in all

29
00:02:47,450 --> 00:02:53,270
these places and I'm selecting all these places in this component right now, I want to use just

30
00:02:53,280 --> 00:02:53,750
orderForm.

31
00:02:58,360 --> 00:03:02,710
Now the orderHandler here by the way should become a constant,

32
00:03:02,710 --> 00:03:09,790
so a function stored in a constant of this functional component. In all the places where we use this props

33
00:03:09,790 --> 00:03:17,500
and I'm selecting all these places now, we should use just props and the inputChangedHandler here

34
00:03:17,500 --> 00:03:19,180
should also become a constant.

35
00:03:22,010 --> 00:03:32,910
Now in there, I'm ultimately setting my state and therefore now here, I will call setOrderForm and

36
00:03:32,910 --> 00:03:39,960
pass in the updated orderForm because that will replace the orderForm object as it should and I'll call

37
00:03:39,960 --> 00:03:45,660
setFormIsValid and pass in formIsValid, which is either true or false and now we can get rid of

38
00:03:45,660 --> 00:03:47,730
set state down there.

39
00:03:47,730 --> 00:03:57,500
Now let's also remove the render method and remove one closing curly brace and in here, you now want

40
00:03:57,500 --> 00:04:06,310
to make sure that in all the places where you use this orderHandler or this inputChangedHandler, so

41
00:04:06,550 --> 00:04:14,560
for example in these two function calls, you remove this and when you access this formIsValid, this

42
00:04:14,560 --> 00:04:21,970
should now just be formIsValid because if you scroll up, here I'm extracting formIsValid from my

43
00:04:21,970 --> 00:04:22,320
useState

44
00:04:22,330 --> 00:04:23,050
call

45
00:04:27,490 --> 00:04:30,360
and let's see where else we're using something like this,

46
00:04:30,360 --> 00:04:32,920
I think it looks good. Now at the very bottom,

47
00:04:32,970 --> 00:04:37,560
rename the component you're exporting to meet your constant name,

48
00:04:37,560 --> 00:04:42,480
in my case contact data with lowercase character.

49
00:04:43,450 --> 00:04:52,620
Now I have an error somewhere, here right where I use or I initialize my formIsValid state,

50
00:04:52,650 --> 00:04:54,920
that curly brace here has to go

51
00:04:55,170 --> 00:04:55,950
and now this looks good.

52
00:04:55,950 --> 00:04:59,970
Now let me quickly search if we have a this keyword in here which we shouldn't,

53
00:05:00,030 --> 00:05:01,080
looks good.

54
00:05:01,080 --> 00:05:05,670
Let's now save that and let's confirm that it works by building a burger,

55
00:05:05,670 --> 00:05:08,770
going to the checkout form and clicking continue there,

56
00:05:08,820 --> 00:05:14,100
we can still see that form here and validation also still seems to work.

57
00:05:17,500 --> 00:05:17,800
Yes,

58
00:05:17,820 --> 00:05:18,520
this looks good.

59
00:05:21,210 --> 00:05:29,800
Let's enter an e-mail address here and click order and under orders, we can see that burger now.

60
00:05:29,910 --> 00:05:31,860
So that still works now

61
00:05:32,110 --> 00:05:36,060
and with that, we converted the contact data component as well.