We created a form which we simply set up in javascript then which we then handled dynamically with our own
input component and our inputChangedHandler where we immutably update any effect that form elements,
now let's make sure we can also submit this form.
For that, we have the button with the clicked handler
and I don't want to use to clicked handler,
there actually is an
onSubmit event handler we can use on the form itself. And there, I want to now execute the method we
used for that, the orderHandler onSubmit.
Now in the orderHandler, I now of course still want to prevent the default,
we still get an event object here automatically passed by react.
Now I want to prevent the default because I don't want to send the request automatically that would
reload my page, instead
I now need to extract the data
I want to submit and the cool thing is all the data is already managed in this state, in our form object
here, which is updated all the time with two way binding, the value is updated at least and the value is certainly
what I'm interested in.
I can create a new constant,
let's maybe name it formData and there, I want to get the data from my state and I want to basically
get my order form object here, though I don't care about the element type and the element config,
I just want to get the name and then the value directly mapped to each other.
So I will transform it a little bit, for this formData can be an empty object initially and then I'll
loop through my form
So there I'll have my form element identifier in this.state.orderForm,
so this very long form element identifier is simply email, country and so on.
And then, I want to set formData for a given form element identifier equal to this.state.orderForm
for the form element identifier and there access the value.
So I simply create key value pairs where I have, where I add a new property to form data,
a property like country, like email and so on
and I set the value of that property not equal to an object but simply to the value the user entered.
And now with this, I have that simple mapping,
I can now use that to submit it
So here my formData, this is in the end what I want to pass
so there I'll add an order data property to my order object and set this equal to formData.
And now let's see if this works in the way I want it to work,
let's also go to firebase for that.
So I'm in firebase, here are my orders,
let's now add a new order and see if that works. For that, I'll go through the full process,
I'll create a burger, click order now,
continue, continue here and then set up some data
here, street, zipcode, some random code, United States maybe test@test.com
Let's pick cheapest here and click order,
we are redirected, let's now have a look at firebase, a new order was added
and then, we have ordered data where we indeed have all these mappings where we have the data the user
entered. So submitting the form works just fine and in a very dynamic way,
look how easy it is to add a new input.
You simply add a new property to your order form in the state, set up the element type, configure it
here and assign a value and you quickly added a new input.
And of course since this is in the state, you can even manipulate this order form immutably at runtime,
so you can dynamically add new properties, enhance new inputs or remove them or change the configuration.
That is why such a dynamic way of creating a form is so awesome.