Unless section we've got some experience with redux form by writing up a form tag and a field tag we
then submitted the form by placing a traditional age button that automatically submitted the form.
It ran our arrow function right here and it canceled out all the different values that had been recorded
inside of our form.
So at this point I think we've got a better idea on the basics of redux form and what it's doing for
us.
Again I want to reiterate the fact that no we do not need redux formed to do all this stuff.
We could totally take care of all this stuff by hand but that would just mean that we have to add all
that additional code ourselves.
So we would have to add on event handlers.
We'd have to add on something action Kreator to save the value our own reducer we'd have to wire up
the connect helper.
That means we need maps data props all these different things we'd all have to take care of ourselves
if we wanted to do a very equivalent form.
So now we've got a better idea of how this works.
Let's start refactoring the survey form and kind of extract this field that we just put in here.
Now I've been talking a lot about this separate survey field components that we're going to have several
of and I haven't really made it super clear why we have these multiple separate fields components.
So it's been a little bit of time to figure that out and a look back at our form.
So here it is right here zoom in OK.
So inside of here remember we have these four separate teks inputs survey title the subject line of
the email the email body and recipient list.
Now every single one of these really appears to be some text input and some label above it.
And so we can kind of imagine that yeah we're probably going to have to like four times in a row.
Make a label and make a little text input right here.
And so the idea of making a separate survey Field's component is just so that we don't have to wire
up all these different event handlers and all this kind of stuff four times in a row.
Instead we will just make one single survey Field's component that contains some text input and a label
and some CSSA style it nicely and then we can duplicate that four times in here and get the component
that we're looking for.
OK so that's the idea behind the separate survey fields.
So it doesn't mind let's give this a shot now to start.
We will make a separate survey field component.
We're gonna put just a little bit of very basic stuff inside of it like some very basic markup and we'll
figure out exactly how we're going to use that with redux form.
So back inside my code editor I'm going to find my surveys directory.
I'm going to make a new file inside of there called survey.
Field Yes.
Again I'm going to put a comment at the very top because I think that was kind of helpful with all these
different survey files that we have.
Let's put a comment at the top and say survey field contains logic to render a single label and text
input not to be 100 percent clear because I realized I didn't even just now when I was talking about
the survey field.
The reason that we're making this news several component again is because we're going to customize the
label on here and where the value in the text input is saved through the use of props.
OK.
That's what I really meant to say and I didn't really realize that a hundred percent clear.
All right.
So let's put together some boilerplate for putting together a traditional or just a very conventional
functional re-act component or not don't worry about redux form right now let's just get something on
the screen so import react from react and then I'll immediately export default and arrow function that
returns.
Let's just do it again.
Place a div that shows in text that says you know how about a survey field like so Gaunt's there's our
survey field.
Now I want to import this into our survey form and then we'll start thinking about how we're going to
wired up to redux for him.
So back inside of redux or Scuse me the survey form I will import the survey field from survey field
and then inside of our existing form tag I'm going to delete the field that we have right now entirely
and I'm going to make a separate function to handle the task of rendering these four different fields
that we want side of our application.
Now we don't really have to put this into a separate helper function by really enjoy keeping my render
method pretty small and kind of isolating small chunks of GSX so we don't really have to separate this
out.
But it's kind of good practice that I find leads to better organize class based components in general.
So I get to make a helper function called render fields.
This thing is going to return a div and then for right now we will make sure that we call this dot render
loops under fields from inside of our render function.
So we've got the form tag render fields and then the button.
So now we get to just focus entirely on render fields and we don't have to worry about any of the other
markup in here.
So it is making the subfunctions is nice for kind of isolating very small snippets of GSX you want to
operate on in detail.
OK.
So again we have this survey field component we want this thing to be in charge of somehow showing a
label to our user and the actual text input.
However I just told you two seconds ago like literally two seconds ago that we use the field tag for
showing text inputs like the field tag is our Swiss Army knife.
That thing is in charge of showing our users some amount of text.
Well remember I had said very briefly that we can not only pass a component of a string like that input
that we passed to the field.
We can also pass in a custom component of our own.
And so that's exactly what we're going to do here.
So then the field tag rather than trying to render a h T.M. input by itself will delegate to our survey
field for rendering that HTL input and wiring up the correct event handlers to it.
So that's a lot of words.
Let's see what this looks like in practice.
I'm going to focus right now on rendering our first field just the survey title.
So we're going to make one tag that's going to show just the survey title field.
So inside if you're going to place a field we're going to give it a type of text.
We're going to give it a name of about survey title actually just title by itself is do title.
And then finally we're going to tell it for it's component property rather than selling it saying Hey.
So show input for us which would tell the field to produce a text input.
Instead we're going to tell the field component that we will take care of rendering some input ourselves
like we will handle that.
Don't sweat it.
So for component right here we'll pass in the survey field that we just created.
So now whenever redux form tries to show this field rather than attempting to show some or render some
age itself like the actual text input it's going to call our survey field and just trust us it's going
to say Surely these people whoever is using this library is going to take care of showing the input
now.
So let's save this and see what we have inside of our browser.
When I flip back over to our application now we just have the text that we had placed inside of our
survey field of survey field.
So it's now changed the survey field and we're going to customize that a little bit to properly show
a text input.
So now inside the survey field component rather than showing the text survey field right here I'm going
to show a text and put myself into.
Now as soon as you see me you put this input tag down right here.
As soon as you see me you write that you're probably thinking Whoa hold up Steven hold up just a second.
I thought you said that redux form is going to take care of showing all these inputs and all this stuff
for us.
Well let me be clear.
Redux forum can show these very basic elements for us but that's not really it's strength.
It's strength is wiring up all the different event handlers for watching changes to this input.
That's where its real strength is.
And we still get to take the benefit of that when we finished the wiring up of this survey Field's component.
So at this point let's take a quick break.
We're going to come back in just one second and kind of review where we are and review the next steps
that we need to move forward.
As a reminder a lot of this Reebok's form stuff is pretty complicated so I like kind of taking a little
bit slow here on the first field that we put together to make sure that the way that the stuff all works
together is very clear and distinct.
So let's take a quick break come back the next section.
See it in just a second.