In the last video we started hooking up redux form to our history create component.
We placed these two field components inside of our component but we very quickly saw this error message
inside of our browser thing that says expected a string or class function but got undefined.
So the reason that we are seeing this is that the field component itself doesn't actually know how to
show a text input or a dropdown or a checkbox or any type of form element in order to tell this field
how to show an actual text input on the screen.
We have to assign a prop to it called component component right here is going to be either a real component
or a function for the field to call this component or the function needs to return some element that
is going to actually be shown on the screen.
So this field element in total is really just about hooking up all of this infrastructure all the stuff
that redux form is actually doing for us when we actually want to show some content or some form element
on the screen.
It is up to us to show the actual input element and customize it in some fashion.
And we do so by making use of the component prop right here so inside of my stream create class I'm
going to add in a helper method called render input and then I'm going to pass a reference to that function
to the component right here.
So this Dom render input and I'm going to do the same thing for the second field as well.
Just render input then inside of render input right here.
I'm going to return a div that says I'm an input like so.
Now clearly that is not in input right.
I think you can agree with me there.
Well I want to prove a little point to you here.
Let's say this or we're going to flip back over to our browser.
When I flip back over I see on the screen twice I'm an input.
So this is a very important lesson to learn.
Remember redux form is about automating all these processes making sure that your form data is inside
the read store getting that data back into the component and then kind of helping you getting that data
into the appropriate input elements.
But at the end of the day redux farm doesn't really know a lot about what you're doing.
It doesn't really know if you are showing a text input.
It doesn't know if you're showing a dropdown it doesn't know if you're showing a checkbox it doesn't
know if you're not showing any input element at all.
Redux farm is just kind of going to assume that you are doing the correct thing.
So in this case for us to do the correct thing we are really supposed to return an input element from
whatever function we passed to the component Propp right here.
So to do things the right way instead of returning a div we're going to return an input element like
so.
So I'm going to save this and I'll flip back over to my browser and I can see that now had those two
input elements.
Now we're not done quite yet.
Remember any time that we show an input element with react in any capacity be it with react or redux
a redux form we always are supposed to make sure that we show that input element in assign its value
property and also give it in on change callback handler.
So right now we are not doing any of those things.
We are just showing a plane input element and this is not a controlled element as we would prefer it
to be.
So in order to turn this into a controlled element any time that the field tag right here calls render
input it's going to pass in some number of arguments right here.
So I'm going to receive this as a single argument called form props and let's just cancel that out right
now and see what we are dealing with.
It's going to flip back over and we could see that we got to cancel logs right here we get to count
locks because we are showing two separate inputs and that is causing render input to be called two times
so I'm going to expand.
But the first one right here inside this object.
You'll notice that we have keys of inputs and meida the input property right here has our actual field
name of title.
So this object right here is meant to essentially be customizing this first input the second consulate.
The second input right here is a name of description.
So this right here is meant to somehow customize the second input.
Over here you'll notice that inside of this input element to this input property we have a bunch of
very familiar looking callback handlers.
So for example if your is on change and we all set the value prop right there as well.
So the intent here.
Again can't say it enough is that redux form is going to wire up all the stuff for us it is our job
to make this very last connection.
It is our job to take that onchange handler and wire it up to the input element and it is our job to
take the value prop and hook it up to the input element as well.
So essentially you and I are supposed to take this form props take the input property out of it and
hook up the relevant properties to the text input.
So we can say something like say on change we want to call form prop's input on change and then for
the value we would pass in a forum prop's input value like so now when I say this it's going to turn
it into a multi-line expression like so totally equivalent to what you just saw on the screen a moment
ago.
OK.
So let's now flip back over to our application and now see what's happening.
When I flip back over everything looks the same but now really interestingly if you type something in
here you can then open up your redux dev tools and you're going to start to see some really interesting
input over there.
OK so I'm going to expand my tools here and they'll notice that when we typed in characters we got a
ton of these different change action types dispatched to our redux store.
So every one of these different change actions that you see is a different key press.
When I typed into that text input in addition if you select the state selector over here on the top
right hand side and then select the tree selector right here you can see that the form piece of state
right here now has some additional property inside of it before it just had one empty object.
I can now open up this object I'll see that it has a key of string create that string create key right
there is coming from the name of the form that we put down here and then if we open up that object we'll
see that it has a Values property and has the title and the description out of our form.
So this is how redux form it stores data inside of your reducer that you wired up to the combined reducers
call every time that you create a new form read this read Form call right here.
You pass in that name whatever name you put inside there read redux form is going to start to store
all the values for that form on a key with that name inside of the form reducer and then nested somewhere
inside there is going to be all the different values out of your form.
So this is just normal redux nothing different than you have learned already.
This is just redux form storing all this information for you automatically.
That is it all right.
It's not going to condense that down on the right hand side.
So clearly redux form is now kind of handling text input for both these two inputs right here.
And we just did that by forcibly taking all the props or two props I should say out of the form prop's
argument right here and passing them into the input arguments for the onchange and value properties.
When he starts to look at the documentation there is actually going to be a little shortened way of
doing this.
So we do not actually have to specify like oh yeah take the onchange prop and assign it to on change
and take the value prop and assign it to value instead.
We can use a little shortened syntax to do this to do so.
I'm going to remove both those props and I'm going to turn this back into a single line.
GSX expression like so.
It's now inside of.
Going to see a little bit of new syntax that we've never seen around GSX before.
I'm going to put down a set of curly braces without any equals like so in front of it.
So just a set of curly braces and then inside if you're going to say Dot dot dot form prop's dot input
like so.
So again this is a new little bit of syntax.
This essentially is going to take the form prop's input property.
So that was an object with the value prop where the value property and the on change handler in all
that stuff that's going to take all those key value pairs and add them as properties to the input element.
So essentially take that entire input object take all the properties out there and add them as props
to the input element.
So if we now say this again we can flip back over.
I can enter in some text here and again we're going to see the same thing that we saw before.
We now see it we have the form with string create and it has values on it of whatever we just entered
in there.
Now we also see some other properties inside there now that we are correctly passing and all the props.
So any time that we make use of redux form we are always going to use this syntax because there are
some other properties inside that input object besides just the value one and the onchange one that
redux form cares about.
Now as a way of shortening up the syntax even further we can actually structure the input argument out
of the form prop's object.
So I'm going to structure out input.
And now we can reduce this down to just be dot dot dot input like so.
OK so I'm going to save this right here.
We're going to take another quick break.
We'll come back the next video and we're going to continue working on our form.