We now need to make sure that our edit screen component also passes in an on submit callback to blog
post form.
Now remember at this time we don't actually have anything inside of our context file so blog context
dot us.
We don't have anything over here that's actually going to initiate an edit of a blog post.
Nonetheless let's just make sure that we add in some called callback to our edit screen and pass it
down into blog post form and then we will eventually come back to this thing and make sure that we take
that updated title and content and pass it off to some function coming from our context object inside
of edit screen.
I'll find a blog post form I'm going to add on on submit this thing is gonna get called with our new
title and new content and so inside of here for right now let's just do a console log of the updated
title and whoops not council but content like so.
So again eventually we have to come back and make sure we pass off the title and content to something
from our context.
We'll deal with that in just a moment.
More importantly there is some other piece of customization we have to add into our edit screen remember
our edit screen needs to somehow tell our blog post form what the initial form values are.
So inside of our edit screen we need to take that blog post that we fetch.
Remember that's the one right here and we need to take that things existing titling content and pass
it down as some starting initial form values to our form.
We already wired up code just about identical to this inside of our edit screen already.
So we just need to essentially do this once again.
But inside of blog post form I'm going to once again pass in some additional prop to blog post form
again.
I'm going to make up this prop name off the top my head I'm going to call it.
How about initial values.
So this will be some initial values to use inside the form for initial values.
I'll pass in an object.
So as usual two sets of curly braces and this will have a title coming from a blog post dot title
and some content coming from blog post dot content.
So now our blog post form is going to receive this new prop and we want to use this existing initial
title and content to initialize our state values inside there.
Remember that's going to make sure that our form has some starting value inside those inputs to make
it into a true editing experience.
So going to save edit screen we're then going to go over to a blog post form and receive that new prop
and use it to initialize our state values.
So inside a blog post forum I'll find my props argument right here.
I'm going to d structure out initial values.
Now here's something really important to keep in mind our edit screen is providing a prop of initial
values and that's an object that has a title and content property.
However our content screen is not providing initial values at all.
So if we tried to now refer to this initial values object in some cases it will be an object with the
title and content property which is what we want coming from the edit screen.
But if we're coming from the create screen initial values is going to be undefined.
So if we try to refer to something like initial values dot title we will get an error message that says
something like can't refer to property title of undefined.
So we're definitely going to have to take care of that somehow.
We'll worry about that in just a moment.
But right now let's just get our edit screen working and make sure that we can show the form and actually
edit a value.
So to assume that everything's going to work coming from the edit screen we can take that initial values
object and refer to it inside of you states.
We're going to pass in the default value or the starting value for our title variable.
It's going to come from initial values dot title and we can do the same thing with content as well.
So initial values dot content OK.
Now our form is now only going to work if we come to it from the edit screen.
If we come to it from the create screen like I just said initial values will be undefined and we'll
end up with an error message nonetheless.
Let's just test this out really quickly coming from edit screen OK.
I'm gonna tap on this existing blog post and I'll tap on the Edit icon and sure enough I do have those
values inside there.
Very good.
Now I can edit those and even though I can technically tap on same blog post that's not going to actually
really do anything right now besides that console log.
OK so this stuff only works for right now but we definitely need to make sure that we've got some better
solution to avoid crashing if we come to this component from create screen.
And just to demonstrate that actually is the case I'm gonna go back to the index page.
Tap on the plus icon in Yeah sure enough undefined as an object when we read initial values dot title.
So let's take another quick pause right here when we come back the next video we'll figure out some
way to avoid crashing when coming from the create screen.