1
00:00:02,230 --> 00:00:05,370
That's all our higher order components changed,

2
00:00:05,380 --> 00:00:11,800
now let's dive into our containers which of course were our primary state containers thus far.

3
00:00:11,800 --> 00:00:13,330
Let's start with orders.

4
00:00:13,420 --> 00:00:16,200
Orders is a class-based component and therefore,

5
00:00:16,210 --> 00:00:20,420
well you know the game, we change it to a functional component.

6
00:00:20,560 --> 00:00:26,090
We also now need to adjust the export down there and export orders with a lowercase o,

7
00:00:26,170 --> 00:00:32,290
the rest can stay as it is, we want to still use the error handling higher order component and connect

8
00:00:32,290 --> 00:00:33,520
it to Redux

9
00:00:33,520 --> 00:00:39,480
but of course inside of our component, we need to make some changes. Obviously componentDidMount will

10
00:00:39,480 --> 00:00:41,160
not work anymore,

11
00:00:41,160 --> 00:00:47,310
we're not using state though so we'll not as the useState hook but to replace componentDidMount, use

12
00:00:47,310 --> 00:00:48,570
effect

13
00:00:48,570 --> 00:00:55,980
and then here we call useEffect and I pass in a function and I move this props on fetch orders in

14
00:00:55,980 --> 00:01:01,230
this function and to ensure that it only runs when this component mounts, I pass an empty array as the

15
00:01:01,230 --> 00:01:08,460
second argument. This props is wrong though, it should just be props in all these places because again,

16
00:01:08,730 --> 00:01:13,920
our props are now received as an argument here.

17
00:01:14,100 --> 00:01:18,990
Now we have to remove the render method thereafter because we're in a functional component, we should

18
00:01:18,990 --> 00:01:26,850
simply return JSX, not in some render method and now in here, in all the places where we use this props,

19
00:01:27,150 --> 00:01:36,690
that should just be props of course and we now have a component that should work again. If I do log in

20
00:01:36,780 --> 00:01:46,200
so that I can view my orders page, if I go there, this loads and displays my orders which I made offscreen

21
00:01:46,380 --> 00:01:50,080
so don't wonder if you didn't see me order these burgers.

22
00:01:50,220 --> 00:01:51,600
So that is working,

23
00:01:51,600 --> 00:01:58,290
let's move on to the checkout component now. In that component, again we have a class-based component,

24
00:01:58,590 --> 00:02:03,660
so I'll name it const checkout or I'll name it checkout and store it in a constant.

25
00:02:03,930 --> 00:02:09,680
We get our props here and then we have a couple of functions or previously methods here.

26
00:02:09,900 --> 00:02:14,940
Let's turn them into functions stored in constants by adding the const keyword,

27
00:02:14,940 --> 00:02:20,680
make sure that you change this props to just props because again we're getting it as an argument here

28
00:02:20,940 --> 00:02:28,230
and remove that render method here and also one closing curly brace and adjust the export name to

29
00:02:28,230 --> 00:02:38,450
meet your constant name. Now in the JSX code we have up here, all the places where we use this props

30
00:02:38,690 --> 00:02:46,250
should now just refer to props and where I previously called my methods with this, well that can be removed

31
00:02:46,280 --> 00:02:51,610
because these are now just functions in this function body, so I can call them like that.

32
00:02:51,710 --> 00:02:54,460
So this is the checkout page,

33
00:02:54,470 --> 00:02:57,160
let's now save this and let's see if that works.

34
00:02:57,260 --> 00:03:08,240
If I build a new burger, order now, continue and here I have a problem with my path, cannot read property

35
00:03:08,240 --> 00:03:11,640
path of undefined in the checkout page.

36
00:03:11,780 --> 00:03:12,880
Let's see what's wrong.

37
00:03:13,850 --> 00:03:21,500
The problem we'll have here is in the app.js file where I set up routing, there I had to use all these

38
00:03:21,500 --> 00:03:28,220
render props or these render methods to render my components that are loaded lazily and actually

39
00:03:28,220 --> 00:03:35,270
what we do get there as an argument in all these places is a props object which we should just forward

40
00:03:35,510 --> 00:03:41,930
to the components so that these have access to these routing specific props that allow us to get information

41
00:03:41,930 --> 00:03:45,070
about the path or load a new page.

42
00:03:45,080 --> 00:03:54,130
So for that, you can simply spread your props here in curly braces on that component and props are received

43
00:03:54,160 --> 00:04:01,740
as an argument here passed in automatically by React router.

44
00:04:01,770 --> 00:04:09,450
So now if we try that again real quick and I click order now, this looks way better and now I can also

45
00:04:09,450 --> 00:04:14,400
click continue and I see this orderForm and that now all works as it should,

46
00:04:14,400 --> 00:04:20,400
so important adjustment here when setting up the routes that you forward the props. With that the checkout

47
00:04:20,400 --> 00:04:22,410
page has also been changed,

48
00:04:22,410 --> 00:04:26,130
we can therefore get rid of the component import up here, we don't need it anymore.