In this video we're going to start working on our stream create form.
The first thing we do is make sure that we can see the stream create a component on our screen.
At present we are just at local whoas 3000 which by default always shows the stream list.
So I'm going to navigate over to local host 3000 slash streams slash new like so and then I should see
it stream create appear on the screen.
Remember this only works because we had set up our re-act router inside of our app component right here.
So here's the route where we gave a path of stream slash knew.
We said that whenever a user went to that route we wanted to show the component stream create and that's
exactly what's happening right now.
Now we can see this component on the screen.
I'm going to find it inside of my code editor in the components directory.
I'll find the streams folder and then I'll open up the stream create file.
All right.
So we're going to be doing a lot of code or writing a lot of code inside of here to show our form and
make use of redux form as well.
Now the first thing I want to do inside of here is refactor it.
This functional component overt to a class based component.
The reason that we're going to make a class based component is that we're going to eventually want to
have a bunch of helper methods so we can kind of better organize our code inside of here.
All right.
So I'm going to delete that first line and say stream create extends re-act component and then open
up my curly brace up there.
I'll put in my render method and it's going to just wrap the return statement and then I'm going to
delete the semi-colon at the end of the class declaration.
So if I now save this I should be able to flip back over and still see a stream create appear on the
screen.
All right.
Next up we're going to import in redux form at the top.
I'm going to import two helpers or two properties from redux form itself.
The first one is fields with a capital F and then the second is redux ormer with a lowercase are from
redux Dasch form now a set.
These things have different capitalization.
Field has a capital F. redux form is a lowercase are the reason for this is that field is supposed to
be a re-act component.
So this is going to be a component that we are going to eventually show on the screen.
On the other hand redux form right here is a function.
This function is going to essentially have the exact same functionality as the connect function that
used from the re-act redux libron the redux form function is essentially what's going to make sure that
we can call some action creator and get some form data into our component.
And remember that all happens automatically it's the first thing we're going to do is take this redux
form function and hook it up to our component down here at the very bottom again redux form very similar
nature to connect so similar in nature that it even has an identical syntax when we make use of it.
So in front of string creates I'm going to write out redux form.
I'm going to put in one set of parentheses and then put a second set of parentheses around stream create.
Remember the syntax here is that redux form is going to return a function and we immediately call that
function with stream create.
Now we're going to pass redux form right here an object for some configuration unlike the connect function
which takes separate arguments into its redux form instead receives a single object and we put a bunch
of configuration into that object.
At present there is only one piece of configuration we have to put in here.
I'm going to say form and then I'm going to provide a name for this form as a stream string.
The name of this form is going to be generally whatever the purpose of the form is.
You'll see what the purpose of this name is in just a minute.
So for right now I'll just put in and name something like.
Stream creates it can be lowercase capitalized whatever you want it to be.
It really doesn't matter.
OK so now we have hooked up redux form.
This component is now going to be passed.
A ton of props a ton of additional props that it was not being passed before just to get a better handle
on what's going on.
Let's add in a console log statement inside the render method and I'm going to count the log.
Stop props all then flip back over
if you see any errors or warnings like this again you're going to see those errors or warnings every
now and then when you were making use of the Google API stuff.
If you see those errors and warnings totally fine you can ignore them altogether.
All right so I get to refresh the page and then I should see this council aigrette year of my prop's
object.
So this is our prop's object that is going into that form.
Notice how there are a tremendous number of properties on that process object.
Now before we probably only had a handful now we have a tremendous number of props that are showing
up.
Thanks to that redux form helper all the props you see right here are part of the automatic system that's
going to be used to essentially get form values into a element and then get changes back out and update
that redux form reducer.
So it's essentially up to you and me to kind of pick through this list of props right here and find
the different props that are relevant to us and make use of them to actually build out our form.
All right.
So I'm going to flip back over.
I'm going to remove that council log and then I'm going to turn this return statement right here into
a multi-line GSX expression.
So I'll put in a set Apprentice's like so I'm going to return a form element and inside if you're going
to put together something called a field.
Now this field component right here has been imported from redux form at the top.
So this is a component that was not created by us.
We make use of this field component anytime that we want to show a.
As you might guess a field to the user a field is essentially some type of input.
It can be a checkbox or a radio button or a text input or a dropdown just about anything that is going
to solicit input from a user.
Whenever we place a field tag we're always going to provide it some number of prompts.
There's one prof that is always required and that is the name Propp the name Propp is not going to be
like the title or the label or the field the name is like the name of the property that this field is
going to manage the form that you and I are trying to put together.
It's going to have a title and a description.
So for our first input right here the first input is going to be managing the title of our stream.
So I'm going to give this first field right here a name of title because I want this field to be responsible
for handling the input from the user to indicate the title of the stream or then put down a second field
so the second field right here is meant to handle this description input right here.
So I'm going to give this one a name of description like so now when you start making use of redux form
there are a couple of error messages that you're probably going to see really frequently.
So I want to show you what those error messages right now.
We're going to save this and then we're going to flip back over to our application and just see what
happens.
So you're going to see this error message right here it says expected a string or a class function but
got undefined.
So what's going on here.
Well essentially when we show this field component the field itself has no idea how to render some type
of input element on the screen.
So a field doesn't know how to show a text input.
It doesn't actually know how to show a checkbox it doesn't know how to show it dropped down or anything
like that.
A field is just a component that's going to be part of the system that's going to automatically handle
all of the forms the put together but it individually is not responsible for actually getting anything
to show up on the screen.
Now let's take a quick pause right here before the section gets too long.
We're going to come back the next section and talk about how we can actually get a text input to appear
when we are making use of a field element as in both these cases right here.
So quit pause and I'll see you in just a minute.