Let's move on to the burger builder. The burger builder here is also a class-based component,
so time to convert it,
you know the game.
We change it to a functional component like that
and in there, I'm managing state and I have componentDidMount, so we automatically see we'll need to import
useState and useEffect. So back in the functional component body,
we're managing the purchasing state,
so I'll useState here and set this to false initially and here, extract purchasing and set purchasing
as elements and componentDidMount is of course replaced with a call to useEffect where we pass in
a function where I then call just props onInitIngredients and to only call this is when the
componentDidMount, we pass a second argument which is this empty array. Now updatePurchaseState should become a
constant here and let's adjust the syntax to fit an arrow function here or to be an arrow function,
the rest here can stay as it is and purchaseHandler also is a constant now.
Now all the places where we have this props should become just props
and when we call this set state purchasing true, we simply call set purchasing true using that function
returned by useState. The purchaseCancelHandler should also be turned into a constant,
so into a constant holding that function and in here where I call set state to set purchasing to false,
I call set purchasing and pass in false, again using that function returned by useState. The
purchaseContinueHandler also is turned into or is converted into a constant here,
this props in the entire application should be converted to just props.
So I did this for all occurrences in this component here by selecting them all simultaneously,
you can also do this with search and replace in your IDE if you have no multi-cursor feature as I do.
And with that, let's also remove that render method here of course
and one closing curly brace and since I'm down here, we can already adjust the export name.
So here it should be burger builder with a lowercase b because I named my constant like that, the constant
that holds this functional component.
So scrolling up again, I got all these functions now stored in constants,
we now need to work on the places where we use them.
So if I scroll down, here when I call this updatePurchaseHandler should be just updatePurchaseHandler
.
This purchaseHandler should be just purchaseHandler.
Scrolling further down, this purchaseCancelHandler and this purchaseContinueHandler should also
be converted to just the function calls without this
and in places where we call this state purchasing, we should just use purchasing because purchasing
is that constant we extract from the array we get back from our useState call. So let's scroll down
and here where I call this purchaseCancelHandler,
this should also be converted in just purchaseCancelHandler.
Now let me search for this,
yes
here in the comment, that is OK, no other this keyword to be found here and therefore let's reload. The
burger builder should still work by the way,
I noticed a bug here which we had in the final project too unfortunately.
If you deduct an ingredient, the price still goes up,
this has nothing to do with React hooks or with Redux,
this is simply a little error here in the burger builder reducer. There if you go to remove ingredient,
you should of course deduct that price and not add it,
so I use a minus here for the total price
and after doing that, if you remove an ingredient, the price goes down as it should. But other than that,
the more important part is that indeed, the rest here works just as it worked before.
Awesome.