Which other higher order components do we have? We have the layout component
and this clearly is a class-based component.
So let's convert this to a constant named layout which receives props and then return something
and in here, we are using state to control whether we're showing or hiding the side drawer when we're
viewing this on a smaller device like here on the mobile phone.
So this is controlled with state
and of course you learned how you can manage state with React hooks, with the useState hook,
probably the most important hook React gives you.
So here, we want to manage whether the sideDrawerIsVisible or not,
so we can useState here and simply pass that side drawer visibility state in, so false or true and I'll
use false since we've previously also started with false.
Now we get back an array and I will use array destructuring to extract the elements into two separate
variables or constants and that will be sideDrawerIsVisible and you can name this however you want
and setSideDrawerIsVisible,
very complex names here of course but I want to be really clear about what we're doing here.
So now with these names extracted, here when we called this set state, we now can use setSideDrawerIsVisible,
here we previously set it to false,
so let's call it like this here and set it to false again and down there,
we set it based on the previous state.
This is now super simple, we don't need a complex function form here, we can simply set this to not
sideDrawerIsVisible. And now we just need to get rid of the render method here since we don't need that in
a functional component and we can't use it there,
we also now need to convert these to methods which they were before, to normal constants that hold
functions,
so therefore to normal functions in this functional component and then in our JSX code, whenever
we access this props, we want to use just props because we're just getting props as an argument here
and whenever we try to use our methods here with the this keyword, we just call our methods like this
and when we useState show side drawer, we use sideDrawerIsVisible,
so our state we're extracting here from useState.
Now last but not least, we need to export layout here with a lowercase L. With that if we save that and
let it reload, the side drawer still works,
so that is looking good.