Let's have a look at our current burger application state, in the checkout page in the contact data
container there, if we have a look at that container,
we see that we got some general state set up at the top of the page and we of course also in there have
our submit method where we submit our order to a server and where we also pass some data.
Now the customer data which is set up here is not suited to this state at all,
actually not even the fields are equal,
now part of that module will be to sync that up but also if we have a look at the form itself, we
have a couple of the normal input elements there,
leave aside that they're not even styled,
we don't really handle their input,
we don't really handle when the value changes, leave alone that we would validate the input the user
left.
So the first step is that we will have to decide which kind of data do we need, that we then store this
in the state then it would be best if we even find a way of dynamically generating our form
and that of course is a last step, of course not only handle the form submission but also to handle the
form validity or check the form validity and change the styling of our form based on the validity for
example.
These are all things I want to do and for that, I'll start by putting these input elements here into
custom components which have a standardized styling, maybe have a default label and also later will be
extended to have room for error messages.
So one step after the other, let's start by putting inputs into their own component.