We've now got our two fields put together.
So we're now going to start to pivot our attention to handling submission of this form.
Remember at some point in time the user is going to want to click a button to actually create a stream
or do whatever it is the form is supposed to do.
We're going to first begin by approaching this problem in the same way that we have handled the form
submission in the past and then we're going to very quickly refactor it to use redux form as well.
So I'm going to put together a little helper method inside my class called on submit and remember anytime
that this thing gets called You'll be called with a event object.
Usually we want to call something like event or prevent default on that object to keep it from attempting
to refresh the browser as the browser tries to submit the form to some back end server that doesn't
actually exist in this case.
So again this is what we usually do but now that we are using redux form things are going to be just
a little bit different.
So as a quick reminder just a little bit ago we did a console log inside of our render method of this
stock drops.
I'm going to test that out again.
I'm going to save this and we're going to take a look at that prop's object really quickly one more
time.
So back inside my browser Here's my prop's object.
And as before we see that there are a tremendous number of methods or excuse me properties added to
that prop's object I'll bite redux form if you look inside if you're going to see that there's one particular
property right here called handle submit.
So this is a function that we are supposed to call any time that the form gets submitted.
This function is provided by redux form.
You'll see what it does.
In just a moment.
It's a lot easier to just kind of show you what this does rather than give you a kind of unclear definition.
So let's just write out some code here and you'll very quickly understand what's going on.
OK.
So I'm going to delete the counsel log and then going to find the form element right here and I'm going
to add on the on submit Propp like so.
Now here's where things get interesting to submit.
Usually we would pass an on submit our callback right here but now that we are using redux form things
are going to be just a bit different.
So to on submit.
I'm going to pass this.
Prop stock handles submit and then into that I'm going to pass my this on submit function like so.
So a lot of very similar terminology going on right here.
Let's just very quickly go over that block.
So we have on submit that is the name of the prop that we are passing down to the form if we pass a
function called are osme if we have a function on the on Samit Propp down into the form the function
we called any time that the form gets submitted then inside of here we first have this prop's not handle
Samit.
This is a callback function that is provided to our component by redux form.
We then call that function with all recall back method that we defined inside of our component right
here.
And when we go through this entire process it's going to change exactly how on Samake It's called internally.
When ever this form gets submitted now handle Smit is going to automatically receive that event object
and automatically call prevent default for us.
That is something that's really tedious for us to have to do a redux form just takes care of it for
us.
So we don't have to call that anymore.
In fact on Samit it's not even going to be called with an event object at all.
Instead it's going to be called with whatever values existed inside of our two field inputs.
So usually we might refer to this argument right here as something like form props now form prop's does
not mean that this is some data passed down by a parent component.
Maybe a better name this argument here would be something like safe form values.
Let's stick with that right now just make things a little bit more clear.
So let's console log out those form values agile very quickly get a good idea of what's going on here.
Now Leslie I want to do very quickly inside the form I'm going to put in a button with the class name
of UI button primary
and I'll give this thing some text like Samit.
All right let's flip back over and we'll test out really quickly.
So enter in some title and some description.
Then when I click on submit there's my council log.
So I've got the title and the description that were entered into the form.
No longer are we dealing with some event object as our argument right here.
The object is really not useful to us one bit.
The only reason we ever dealt with the event object was so that we could call that present default method.
So now this on Samit callback rather than getting the useless event object is going to be called with
all the values out of our form inside of an object and that's going to make it really easy for us to
take those form values now and save them on some API or validate or whatever it is we want to do with
them.
All right.
So that's pretty much it on how we handle forms submission with redux form.
Again we reference handle Samit and then we pass in whatever callback we want to run after the form
gets submitted.
So in reality handles submit is going to be called.
And then once it processes the form event and all that kind of good stuff our callback then gets invoked
with our actual form values that you and I care about.
All right.
This looks pretty good.
Now one little thing I want to point out here if I refresh the browser and I just click on submit right
away I still get my submission event even though I did not enter a title in a description.
The chances are that you and I do not want people to be able to create a stream that does not have a
title and a description.
So I think that before we allow a user to submit this form we should really be validating these text
inputs.
So let's take a pause right here.
When we come back the next section we're going to learn how we can validate some text inputs with redux
form.