In the last video we hooked up these two field components to the new render input function.
Anytime time that the field component called render input it also passed in a set of properties that
we took and passed along to the text input inside of your screen.
Remember the running theme with redux form is that it's going to do all this stuff for us automatically
and it's up to us just to wire up this last little step right here to take whatever handlers or values
that are provided by redux form and make sure that we actually wire them up to some meaningful input.
Now in this video we're going to continue working on our render input function right here.
So at present we have our inputs with dot.com input when that shows up on the screen.
We get this really ugly input right here like there's no label on there.
They're the two inputs are right next to each other and it's really tough for a user to figure out what's
going on.
So rather than just returning a text input right here we can actually return an entire blob of GSX.
So like a couple of different elements we are not restricted to just returning the one single input
by itself.
So I'm going to again turn this into a multi-line expression.
Sorry for going back and forth.
Remember to clean up the semi-colon on the right hand side of the input and then I'm going to wrap this
with a div that has a class name of field.
And then above it I'm going to put in a label tag because we probably want to tell the user what actual
input this represents.
I remember the render input function is going to be called two times one time by our field or title
and one time by our field for description.
So when we put our label inside of here we need to make sure that we know which field we are currently
going to be working on.
So to get that appropriate fields we can add on or the appropriate title of the field I should say we
can add on an additional Propp to both of these field elements.
So on the first field I'm going to add on a prop of label and for the first one I'll put in her title
and then on the second one I'll put in a label of enter description like so anytime that we add in some
props to our field components right here redux form is going to see that we have passed in some prop
that it doesn't know what to do with.
In other words that field element has no idea what to do with a label prop.
So the field element by default is just going to take that prop and pass it through to the render input
function.
So this is how we can customize the render input function when ever it gets called we can just add on
additional props to the field element.
So now because we passed in this prop that the field component doesn't know about it's going to be passed
in to render input and we can receive that as an additional property on that first argument.
So I can now reference this label property and restructure it out of that object that gets passed in
as the first argument.
And now inside my label right here I can print up label like the cell save this and we'll flip back
over.
And now we can see that we correctly get our label appearing on the screen.
All right cell looks pretty good.
Now I say that it looks pretty good but it doesn't really look perfect.
We really don't want the text to be right next to each input.
So to fix that up we can just add on a quick class name to our form element right here.
So I can put on a class name of UI form like so.
And then once I do that I'll see the nice form appear that looks a lot better right there.
OK.
So this is looking pretty good.
So now we have the ability to show the form in all the different fields that we want and we could put
in some title and description inside of here.
Now the last thing we need to start to think about is how we can submit this form and get some callback
that says hey the form is just submitted so that you and I can try to create a new stream or whatever
it is we are trying to do.
So let's start to figure that out in the next video.