So in the last lecture we got some basic styling for our form,
we also fixed that error though I'll revisit that.
Now let's find a way to create our form dynamically and to clearly define how each element should look
like.
For that I'll have a look at the data I actually want to pass with the order, get some customer data
like the name and address and then we get this delivery method,
this could be a drop down where we can choose between fastest and cheapest or something like that.
So for that, let's say you want to store or handle this form shape basically and all the element data
in our state, there we could have the order form property which should be a javascript object
and in this javascript object, I now wanted to define all the form fields, so all the inputs,
how they should be configured and their values.
So now I will grab my set up from down there with the customer and the delivery method, delete these
fields from the Order object for now and add them to the order form. Now I want to flatten this so that I
just have all the inputs I want to have,
so I get rid of customer and of address,
so of these nested properties here,
so that now, we just have some properties in the order form where each property represents one input
I want to create.
Now the goal is to also define how this input should look like so that we can really go through this object dynamically
that we could even add elements dynamically and create a fitting input element.
For that, I want to have an element type property for each element
and this should be a normal input element.
Here we should use normal html tags basically, without the lower and the greater than sign, just a tag
name. Then let's say we want to have an element config and the names of these properties are of course
totally up to you.
The element config here could define the configuration, the normal attributes
we can set up for the chosen html tag.
So here, that could be a type which should be text,
we could set up the placeholder here too which could be your name.
This will be what I want to distribute over the created input and then let's say we also want to have
a value for the name,
the value here could simply be Maximillian or of course an empty value at the beginning, and that's it
for now
and this is a pattern I now want to repeat for all the elements. And you could of course write a bit
leaner code, you could create a helper function which creates such a javascript object so that here
you call just a function which initializes it,
I'll write this in the long form to make it really clear what's happening here
even though that will bloat our class for the moment.
So street should also be input element text
and then here, I'll just input street like this, value could also be empty.
The zip code, same game, input of type text,
you could of course enter type number here but maybe you want to leave this zipcode as a text so that
users can also enter codes with some characters in them somewhere where this would be necessary.
So here I'll add zipcode as a placeholder,
the country, well here you could of course use a dropdown but I'll also use a text input here so that
we can accept any country because having a dropdown with restricted countries, implementing that is
a bit more complex and you would probably use some third party package for that.
And then the e-mail,
last but not least, here the type could be email
so the default html type email, you can assign to input
and here, you can say your mail or e-mail actually.
So with that we get this set up,
now the delivery method should of course also get such object, here the elements type however should
be as select and there the element config should of course also have some elements but not the type,
not the placeholder,
here we could say we want to define the options we want to have, and options
then of course should be an array and then we could enter javascript objects again where we have the
value that could be something like fastest and the display value which could be fastest like this
and of course, you can also fine tune this configuration to your exact needs,
I'm just showing some examples here.
So here we could then have of course a second option which is cheapest and here it's cheapest,
so this could be my delivery method set up.
So now we get this quite long order form with all the key value pairs where we have some identifiers
of our different form elements basically
and then a javascript object with the configuration set up,
and now let's adjust our input element to well be able to work together with that so that we can then
dynamically create these inputs by just looping through our well object here, which of course we have
to transform in an array for that.
But let's start by adjusting the input element,
I'll do this in this lecture too.
So there, we probably want to pass something like let's have a look, like we want to pass the type and
the config and the value,
so we should do this. Let's remove type name placeholder here, let's simply pass the element type here
which should be something, the element config and we don't need to write this lowercase because
I will change the way I distribute props on the created element and then also, the value which is something
of course real values will be added soon.
Then let's go into our input element and in there,
now we receive different props.
We have the element type where I still want to use my switch statement
but then I no longer distribute all props, I just distribute props and there, this element config property
I just set up.
So this property which of course in the end should receive the element config set up for a given input
in our state, and there if we then distribute the props, these are the default
html attribute names and that is of course important that you use them inside element config,
the default names.
So with that, we got this set up, we got the input element
adjusted here, of course I also want to add value to each input element,
so I will add in my input component, add the value property there and bind this to props.value so that
this is also received here.
And now I'll simply wrap all these properties over multiple lines for the created elements so that
it's a bit easier to understand and read and with that, we get the input element, our custom input component
I should say which hopefully works. In the next lecture,
I now want to use our javascript form data we configured as a state to create the real input elements
with it.