In-class video we read factored stream create to make use of stream form.
We're not going to do the same thing for stream edit as well.
Stream is going to be very similar to the work we just did inside of stream create the only big difference
here remember is that we want to make sure that the form is going to show some initial values inside
of those inputs.
Someone to very quickly tell you how we do that with redux form.
First I need to open up my code editor and find the stream form component.
Here it is right here.
Stream form.
So I just want to remind you very quickly that down at the very bottom of the file when we export a
component from here we have stream form.
And it gets wrapped inside of redux form.
Right.
It gets wrapped by that helper right there.
So just with that in mind I going to show you another diagram here.
Very quickly.
So in this diagram very similar to the one we are just looking at.
I just essentially took off stream creates.
So we have stream edit that is showing stream form wrapped inside of that redux form helper.
So when we passed props from stream at it down to stream form just as we did inside of stream create
remember your stream create right here and we pass some props down to stream form.
We're not actually passing props directly to our stream form component.
Instead we are technically passing props to redux form redux form then turns around and passes those
props onto our component.
So there are actually some very special props that we can pass down into the redux form wrapped component
that we are creating here.
One special component or Simmie one special prop name is initial values.
If we pass some initial values Propp from stream at it down to this kind of redux farm rapt stream form
it's going to provide some initial values to show inside of the text inputs inside of stream form.
So if we pass in a prop named initial values specifically initial values that is a very special name
with redux form.
And if that object contains a title and description then those will be used at the as the initial values
for our form.
Now when I described this with diagrams it probably looks kind of confusing.
So let's just start to work on string at it.
And then when we get to the part where we want to set up these initial values We'll take another glance
at this diagram to make sure you understand what's going on here because this is a really key topic
for understanding how to set up any type of form like this right here with redux form.
So let's get to it.
All right.
So I can open up my code editor and I'm going to find the stream edit component.
Now inside of here we're going to do a step by step refactor just like we did with string create.
So up at the top I've got import connect.
That's good.
I've got import jet stream.
That's good.
I also want to import edit stream from my action Kreator file as well.
Remember edit stream is what is going to eventually allow us to take the idea of a stream and some new
properties for the stream and update our API record or the record maintained by the API.
And then after that I'm also going to import our new stream form component from stream form Zao inside
of your.
We're going to leave the component in MT still want that.
We're going to define an on Samit function.
This is going to be used as our callback for stream form just like we had inside of a stream create.
So when the user eventually submits our form this thing is going to receive some form values and for
right now we will just cancel log out those form values.
Next up inside the render method rather than just returning a div with the stream's title that we fetched
we're going to instead return a multi-line block of GSX just like we did back on stream create.
So now inside if you're going to return a div with an H 3.
Is that what we use on the other one.
When we check really quickly Yeah it's three that says edit a stream and then after that we will place
our stream form component.
Now just like before we're going to pass in an on submit callback and then we will leave off the initial
values that I was talking about just a second go for right now.
So we went to any initial values just yet let's just get this component to show up on the screen and
then we'll come back and visit this initial values thing.
But this is where we will specify our initial values.
Last thing we need to do here down at the bottom we still want this map state to prop's so that we can
get some initial values for the form.
We still want to have the connect function here we still want to be able to fetch a stream.
The only other change that we need is to make sure that we pass in our action creator at it stream again.
That is the action creator that's going to make her request over to our API and update some given stream.
So I can make sure that on the Connect function right here I also put in at it stream.
OK so let's save this and we'll flip back with the browser and just make sure that we can get some form
appearing on the screen.
So when I flip back over I'm going to go back to my list of streams page and then click on edit for
one of these two streams right here doesn't matter which one sultry editing this one.
All right.
So I see my form right here it says edit a stream but as we said we don't have any initial values for
the form.
So now we're going to come back to that topic of initial values.
So again we have stream edit it is showing a redux form wrapped version of stream form if we pass a
proper named initial values from stream edit down to stream form that initial values Propp will be used
as the initial values for the form.
So I'm going to open up stream at it same file we just had open.
When we create stream form right here I'm going to pass in a proper named initial values.
And again this is a very special property name with redux form.
I'm going to get myself a little bit of space here like so and now for initial values I'm going to put
in one set of curly braces and then remember we want to put in a second object here so I'm going to
put in a second set of curly braces.
Now the outside curly braces indicates that we are going to write some javascript expression inside
of our GSX.
The second set is indicating that we are creating a normal object.
And now I'm going to pass in a title we're going to eventually replace this with the title of the actual
string that we fetch.
But for right now I just want to give you a quick example of how this works.
So going to put in a title of edit me and a description of change me to about that
and I'll zoom out for a second so you can see that whole line.
Now because we are passing initial values down to a component that is wrapped by redux form these will
be used as the initial values inside of the form itself.
Now one thing that is going to hopefully connect the dots here just a little bit.
Why are we putting in an object with title and description.
Well we're using specifically those two property names because if you open up your stream form component
your stream form right here if you find the render method you will recall that we had two fields inside
of here.
The first field has a name of title.
The second field has a name of description.
So essentially when we show these field components right here they're going to look at any initial values
that were passed in from the parent component to this one.
They're going to see if that initial values property has a name of type or the property of title or
a property of description.
And if they do then those initial values will be used as the initial values for the field.
So that's the real connection between these two things.
OK.
So let's save all this and we'll flip back over to our application and we'll see that we do in fact
have these initial values here now.
So if I change the text here from at it me to edit this or whatever you want to change it to.
You'll see that we now have edit this there instead.
And so in a very similar fashion we could remove this object right here.
And instead pass in our stream that we have loaded into this component so I can pass in this prop's
not stream.
Remember our stream is an object with a title and a description property.
So now the title and description off of our stream object will be used as the initial values for the
form.
Let's save this we can flip back over.
And now we'll see the initial value coming from the title the stream an initial value coming from the
description of the stream as well.
So just one more time really quickly here we are passing an initial valleys Propp down to stream form.
Remember stream form is technically rendered or wrapped by the redux form helper so that redux form
helper sees this prop of initial values it sees that it is an object with a title and a description
property.
And so when the stream form is rendered we have a field with a title and a field with a description.
And so those initial values are used as the initial values for a field number one and field number two
right here.
So now we should be able to make changes to this.
And when we submit the form it's going to call the callback handler that we had defined inside a stream
at the summit helper function right here.
Remember we defined on submit and we passed that down into our stream form right there.
And right now our handler is just doing that on a log.
So after making those changes I'm going to click on submit and we'll see our console log right here.
Now notice that the description and the tile have been updated properly.
But there's one little issue with the console log that we see right here.
One not so good little issue.
So let's take a quick pause right here.
When we come back the next section will talk about what is kind of off about this console lock.