So in the last lecture we defined our javascript object which should represent our form.
Now I want to output that in my render method here,
I want to create all these inputs dynamically. So I'll get rid of them in the render form here for now
and I now need to first of all turn my order form object here into some kind of array
I can loop through, an array where we basically have javascript objects where this key is just one property,
an identifier property and then we also still have the other properties.
Well we can create such an array relatively simple here,
there are always more than one method, of course here,
I'll create my form elements array, a constant which is an empty array and then I will use a for/in loop
where I get to keys of my
now this.state.orderForm and the key therefore are of course the property names of that object.
So the keys are going to be name, street, zipcode and so on
and if we access order form for a given key, we get these values here on the right side of course.
So with that information, let's go down there and let's create or let's push I should say a new object
to the form elements array,
this object should have an id which is the key, because again that is name and so on, these are identifiers
and then it should have the config which is this.state.orderForm for a given key.
So this is now the right side of this property
so this javascript object, that is what we we'll store in this config property. And of course, you can
name the config property whatever you want, you can name it set up whatever you want.
So now we got an array of javascript objects, with that array we can work
I can work with it by now creating my form here while looping through all these elements.
So I will add curly braces here in the form and now I want to loop through my form elements array with
the map method of course to generate a new array basically, here
this will get the individual form element and it just returns some jsx here, the jsx it returns
of course, it should be my custom input component.
And now we can configure it, it should have the elements and the element type.
Now the element type can be accessed on the form element in my array and there I said that in this config
property, we would store the right side of our setup,
so this object.
So in the config property, this is just another javascript object,
there should be the element type property, an element config and value
and these are properties I want to pass on.
So in the end what I pass on here is form element, config and then there as I just said, the element type.
So just the name we have here, element type, we pass element config and value in the same way,
so here we passed the element type,
now the element config is passed as I just said in the same way with form element config, element
config and the value also is passed like this element,
excuse me,
form element, form element config element config.
Let's get rid of that dummy and put elements here at the top
and with that we should dynamically create our input elements.
Now as always, I forgot my key and right now we're not having an onChange handler,
we also right now seem to have issues extracting our placeholder,
it's an object and not a string
so these are things we have to take care about.
Let's start with the key, for the key,
I'll simply take form element id property we add in our loop here, have a typo here,
now regarding the missing onChange handler for which I also got an error, we'll take care about this in
a second.
Let's have a look at why we have issues outputting our placeholder though,
I've found the error, I'm passing the wrong value, it's not the placeholder,
the value is wrong. Here of course, this should be config value not element config.
Now if that we're outputting the placeholder,
this all is working.
Now of course, we also have to make sure if we can react to changes and that we also have a way of handling
our dropdown down because right now, this is created incorrectly because of course here we have our switch
statement and the input component, we handle inputs and text areas but we also try to create a select element,
we do this here in our set up for delivery method, should be select with options.
So let's add or let's adjust our input component to also be able to create that before we then have a
look at how we can actually get the data
the user enters.