That's all our higher order components changed,
now let's dive into our containers which of course were our primary state containers thus far.
Let's start with orders.
Orders is a class-based component and therefore,
well you know the game, we change it to a functional component.
We also now need to adjust the export down there and export orders with a lowercase o,
the rest can stay as it is, we want to still use the error handling higher order component and connect
it to Redux
but of course inside of our component, we need to make some changes. Obviously componentDidMount will
not work anymore,
we're not using state though so we'll not as the useState hook but to replace componentDidMount, use
effect
and then here we call useEffect and I pass in a function and I move this props on fetch orders in
this function and to ensure that it only runs when this component mounts, I pass an empty array as the
second argument. This props is wrong though, it should just be props in all these places because again,
our props are now received as an argument here.
Now we have to remove the render method thereafter because we're in a functional component, we should
simply return JSX, not in some render method and now in here, in all the places where we use this props,
that should just be props of course and we now have a component that should work again. If I do log in
so that I can view my orders page, if I go there, this loads and displays my orders which I made offscreen
so don't wonder if you didn't see me order these burgers.
So that is working,
let's move on to the checkout component now. In that component, again we have a class-based component,
so I'll name it const checkout or I'll name it checkout and store it in a constant.
We get our props here and then we have a couple of functions or previously methods here.
Let's turn them into functions stored in constants by adding the const keyword,
make sure that you change this props to just props because again we're getting it as an argument here
and remove that render method here and also one closing curly brace and adjust the export name to
meet your constant name. Now in the JSX code we have up here, all the places where we use this props
should now just refer to props and where I previously called my methods with this, well that can be removed
because these are now just functions in this function body, so I can call them like that.
So this is the checkout page,
let's now save this and let's see if that works.
If I build a new burger, order now, continue and here I have a problem with my path, cannot read property
path of undefined in the checkout page.
Let's see what's wrong.
The problem we'll have here is in the app.js file where I set up routing, there I had to use all these
render props or these render methods to render my components that are loaded lazily and actually
what we do get there as an argument in all these places is a props object which we should just forward
to the components so that these have access to these routing specific props that allow us to get information
about the path or load a new page.
So for that, you can simply spread your props here in curly braces on that component and props are received
as an argument here passed in automatically by React router.
So now if we try that again real quick and I click order now, this looks way better and now I can also
click continue and I see this orderForm and that now all works as it should,
so important adjustment here when setting up the routes that you forward the props. With that the checkout
page has also been changed,
we can therefore get rid of the component import up here, we don't need it anymore.