Let's move on to the contact data page and there we have a class-based component, so let's change that
to a constant contactData which holds our functional component that receives the props
and here we're managing state and actually quite a big state object but this is not really a problem.
The only interesting thing here is that in this state object, we have one large piece of state, that is
related to our orderForm with the validity and so on
and then we have an additional field which simply contains the overall validity of the form.
Now we could leave it all in this one super big state object but with the useState hook, it is actually
better and you should import that, it is actually better to split this into two state objects or two
state pieces.
Now why is that better?
It simply can make it easier to manage your application if you split state into chunks
and obviously you could also split the overall orderForm here into chunks so that you have one state
for the name control, one for the street control, one for the zip control but to keep the logic we already
wrote where I do actually dynamically go through my state object and access different fields for different
inputs that were used, to keep that, I will actually not break this large state object into smaller pieces,
I'll just construct two different state pieces, one for the orderForm and one for the overall form validity which is
actually right now stored in here.
So for that, let's useState here and pass in that large object with the name field, with the street field
and so on,
so all the way down right before here and close it before formIsValid
and then let's also useState and pass in false and then get rid of formIsValid. You could of course
also manage an object here that contains formIsValid and then the value false or true
but since we just need add value, we can also just manage that value standalone in here.
Here I will extract two fields, formIsValid and setFormIsValid and for our large
state up there, we also need to extract the state values. Here the constants I'll extract, I'll name them
orderForm and setOrderForm.
So now we have useState in place managing our form state,
let's now go down to the orderHandler and in the places where we access this state orderForm, in all
these places and I'm selecting all these places in this component right now, I want to use just
orderForm.
Now the orderHandler here by the way should become a constant,
so a function stored in a constant of this functional component. In all the places where we use this props
and I'm selecting all these places now, we should use just props and the inputChangedHandler here
should also become a constant.
Now in there, I'm ultimately setting my state and therefore now here, I will call setOrderForm and
pass in the updated orderForm because that will replace the orderForm object as it should and I'll call
setFormIsValid and pass in formIsValid, which is either true or false and now we can get rid of
set state down there.
Now let's also remove the render method and remove one closing curly brace and in here, you now want
to make sure that in all the places where you use this orderHandler or this inputChangedHandler, so
for example in these two function calls, you remove this and when you access this formIsValid, this
should now just be formIsValid because if you scroll up, here I'm extracting formIsValid from my
useState
call
and let's see where else we're using something like this,
I think it looks good. Now at the very bottom,
rename the component you're exporting to meet your constant name,
in my case contact data with lowercase character.
Now I have an error somewhere, here right where I use or I initialize my formIsValid state,
that curly brace here has to go
and now this looks good.
Now let me quickly search if we have a this keyword in here which we shouldn't,
looks good.
Let's now save that and let's confirm that it works by building a burger,
going to the checkout form and clicking continue there,
we can still see that form here and validation also still seems to work.
Yes,
this looks good.
Let's enter an e-mail address here and click order and under orders, we can see that burger now.
So that still works now
and with that, we converted the contact data component as well.