In the last section we showed our same field component but rather than telling it to show a input tag.
We told the field component to leave rendering of some HMO element to us.
We would take care of it not the field to do so we passed our own component to the component product.
And so now the field is relying upon us to show some component here that will somehow show a text input
to the user and then pass whatever values the user enters into their back up to the field component.
So right now we have the field we're telling the field that we're trying to enter some tests here.
We've told it the name of the property that we're trying to record and we've also told it that instead
of attempting to render text input itself it should rely upon us to do it ourselves.
So now we're going to change on over to the survey field and figure out where to go from here.
Inside the survey field.
Remember this thing is now being rendered by that field Tac.
So because it's been rendered by the field tag redux form has the ability to add on a whole big dump
of props inside of this thing.
So our survey field has a whole bunch of props being passed to it right now from redux form.
Let's add on the props object as an argument here and then console log it out to get a better sense
of what we have access to is going to cost like props and let's from inside the browser and see what
we get.
So now when this thing refreshes Here's my props object and you'll notice a couple of different properties
inside of here.
We've got a input property some metal property and some type of text.
Let's take a closer look at input right here.
Now when we look at input you're going to see a couple of different functions inside of your stuff like
on blur on change on focus.
If you look closely at these you'll realize that these are different event handlers.
So redux form is automatically generating a bunch of form or to me a bunch of event handlers for us
to pass along to the text input that we are rendering that we are going to generate ourselves.
So if we take all the props on this input key right here they're being passed to us and just pass them
along to the text input that we are showing inside of our field our survey field right here like this
text and put that we're running ourselves redux FLARM will automatically watch for any changes or watch
for this thing to be blurred or focused or get something dragged on it or whatever else any other type
of event redux form will automatically intercept and record the value of that event for us.
So again even though we are making our own custom component to past the field here we still get the
benefit of not having to manually wire up and handle all the different values that are coming out of
this text input right here.
So with that in mind let's take that Propst input.
So Propst input is the value that we really care about.
That's where all these different event handlers from redux forum live and we want to pass them along
toward text inputs right here now rather than say light props or input.
This would be a great place to use a little bit of 60 structuring so that the argument up here rather
than putting just props you can replace it with the parentheses some curly braces and then just the
word input so that automatically looks onto the props object and it pulls off the input property and
assigns it to a variable called input.
So now that object that contains all these different callbacks that we want to communicate along to
our text input are available on this object right here.
So all we have to do is pass those along to the input to do so we're going to use some kind of interesting
looking GSX.
So let's write it out and we'll talk about what it does.
I'm going to put curly braces and then dot dot dot inputs so this right here says hey look input we've
got a big ole object right here with a lot of props that we want to pass to you but we don't want to
pass it as like as specifically named property.
We want you to just have this object in all the keys and values that are in it to do so.
We put down the curly braces that dot dot dot input and that's pretty much it.
So just to be clear doing this right here would have been totally equivalent to doing something like
on blur equals input Doppler sieving input dot on blur and then on change equals and put Daut on change
because remember the input tag the input element the input probably has all those different callback
functions attached to it or all those different event handlers.
So really we're just saving ourselves writing all this annoying stuff out by putting the DOT DOT DOT
in put in here.
OK.
So that's looking pretty good.
Let's now save this.
We will change back over to the browser and again will tech.
We'll put some text into this input and then press the submit button and see what console log we give
our values now.
So put some text in here or click submit.
And when I do so I again see title which is the name of our field that we added and the value that we
added in there.
So we are successfully taking a bunch of event handlers from redux form wiring them up to our input
elements and that input element is being rendered by the field.
And so eventually all that information all those change events eventually get percolated back up to
redox form for us.
OK.
So that is pretty much it for handling individual or making custom components with redux form.
Let's take a quick break in the next.
And then in the next section we're going to come back to the survey field.
We'll add on some nice label on here a little bit of styling some other stuff.
And make sure that everything is looking pretty good.
So take a quick break and continue in the next section.