Our blog post forum is now all ready to go when we just need to make sure that whenever a user submits
that form we do something better than just console log.
That title and content.
So in this case whenever user submits that form we definitely want to somehow modify our state.
Remember right now all of our state is being contained inside of our context blog context.
J has filed inside of here we have our reducer and underneath it we have our different action functions.
These action functions dispatch an action and that's how we change our state object.
So in order to actually take the new title in content that the user provided and use it to actually
update something well we need to make sure we add in a new action function.
So inside of blog context right after delete blog post I'm gonna add in a new action function and I'll
call edit blog post so this will have the same signature as the others.
It's going to be a function that will be called with dispatch and then inside we're going to return
a new function.
Like so remember this inner function is what's going to actually be ran inside of our component.
So hopefully we're going to call this inner function with our new title and content.
I think that in order to understand what blog post we want to update we should also provide a new I.D.
or not a new idea.
But the idea of the blog post we want to edit as well.
So then inside of here we can dispatch a new action.
So remember that's gonna be an object with a type property.
In this case we'll make our type something like edit blog post and then for our payload we will take
that I.D. title in content and throw it into an object inside the payload.
So put a object inside of here and I'll say the I.D. of the blog post we want to edit is I.T. the title
is going to be this new title we just passed in and finally the content will be that new content we
just passed in as well.
Now I know this is a really long line of code.
So going to say this really quickly just to fold it like so so you can see what's going on more easily.
So now in that payload object we've got a bunch of duplicate keys and values so we can condense that
to be just I.D. comma title comma and content like so now to make sure that this function is available
to all of our child components inside of our application we'll add it into this object.
That's the second argument of create data context so over there as the third key value pair inside there
I'll put in edit blog post
OK so now that this function is available to all of our components we can go back over to edit screen
dot J.S. here's edit screen remember that function we just added in is now available through our context
object.
So in addition to pulling off state right here I'm also going to pull off.
Edit blog post.
And now we can call that function from inside of our on submit callback.
So instead of doing the console log I'll do edit blog post and I'll pass in the I.D. the new title and
the new content.
So the ideas we can get access to inside of here either by referring to blog post I.D. or using navigate
navigation dot get param I.D..
Either one in this case since we're already getting that blog post right there.
Let's do actually I want just to be really consistent because this is gonna kind of set us up for some
future success will refer to navigation get pram I.D. and rather than just duplicating that code right
there.
How about we save ourselves a little bit of typing and assign it to a new variable up here at the top
so I'll say const I.D. is navigation dot to get param I.D. And now we can just refer to I.D. everywhere
inside this component so I can clean up this comparison and just say find a blog post dot I.D. equal
to I.D. and then back down here inside of edit blog post as the first argument will pass and I.D. then
our new title and then our content okay.
So that should be a good first step here.
Now we've got the ability to call this action function and the action function back inside a blog context
dot J.S. dispatches in action.
Remember that dispatch when we call it react is gonna take that object right there and automatically
call a reducer that we defined at the top of the file.
That action object is then going to show up inside of here as the second argument and the first argument
is going to be our current list of blog posts.
So now we need to add in a new case statement to the thing we need to go through our state array we
need to find the blog post we're trying to edit and essentially replace it or edit it using the information
out of our action object.
So let's take a quick pause right here and tackle that in the next video.