1
00:00:02,300 --> 00:00:06,430
Which other higher order components do we have? We have the layout component

2
00:00:06,440 --> 00:00:08,840
and this clearly is a class-based component.

3
00:00:08,900 --> 00:00:13,970
So let's convert this to a constant named layout which receives props and then return something

4
00:00:13,970 --> 00:00:19,850
and in here, we are using state to control whether we're showing or hiding the side drawer when we're

5
00:00:19,850 --> 00:00:24,440
viewing this on a smaller device like here on the mobile phone.

6
00:00:24,440 --> 00:00:26,550
So this is controlled with state

7
00:00:26,600 --> 00:00:33,220
and of course you learned how you can manage state with React hooks, with the useState hook,

8
00:00:33,260 --> 00:00:37,310
probably the most important hook React gives you.

9
00:00:37,310 --> 00:00:41,160
So here, we want to manage whether the sideDrawerIsVisible or not,

10
00:00:41,330 --> 00:00:48,110
so we can useState here and simply pass that side drawer visibility state in, so false or true and I'll

11
00:00:48,110 --> 00:00:51,950
use false since we've previously also started with false.

12
00:00:51,980 --> 00:00:57,470
Now we get back an array and I will use array destructuring to extract the elements into two separate

13
00:00:57,470 --> 00:01:05,660
variables or constants and that will be sideDrawerIsVisible and you can name this however you want

14
00:01:05,990 --> 00:01:09,110
and setSideDrawerIsVisible,

15
00:01:09,140 --> 00:01:14,320
very complex names here of course but I want to be really clear about what we're doing here.

16
00:01:14,360 --> 00:01:21,620
So now with these names extracted, here when we called this set state, we now can use setSideDrawerIsVisible,

17
00:01:21,620 --> 00:01:24,560
here we previously set it to false,

18
00:01:24,560 --> 00:01:29,810
so let's call it like this here and set it to false again and down there,

19
00:01:29,840 --> 00:01:32,440
we set it based on the previous state.

20
00:01:32,480 --> 00:01:38,810
This is now super simple, we don't need a complex function form here, we can simply set this to not

21
00:01:38,810 --> 00:01:44,840
sideDrawerIsVisible. And now we just need to get rid of the render method here since we don't need that in

22
00:01:44,840 --> 00:01:47,550
a functional component and we can't use it there,

23
00:01:47,630 --> 00:01:54,770
we also now need to convert these to methods which they were before, to normal constants that hold

24
00:01:54,770 --> 00:01:55,400
functions,

25
00:01:55,430 --> 00:02:01,550
so therefore to normal functions in this functional component and then in our JSX code, whenever

26
00:02:01,550 --> 00:02:08,030
we access this props, we want to use just props because we're just getting props as an argument here

27
00:02:08,540 --> 00:02:15,470
and whenever we try to use our methods here with the this keyword, we just call our methods like this

28
00:02:16,070 --> 00:02:21,020
and when we useState show side drawer, we use sideDrawerIsVisible,

29
00:02:21,020 --> 00:02:24,830
so our state we're extracting here from useState.

30
00:02:24,830 --> 00:02:31,840
Now last but not least, we need to export layout here with a lowercase L. With that if we save that and

31
00:02:31,840 --> 00:02:34,930
let it reload, the side drawer still works,

32
00:02:34,930 --> 00:02:36,190
so that is looking good.