All right.
My friends in this video we're going to make sure that our edit screen shows a form that a user can
use to actually edit an existing blog post.
There's a couple of interesting things we have to do inside of here.
First off we need to make sure that when our component is first rendered we reach into our context object
and retrieve whatever blog post we're trying to edit.
We're then going to use that existing blog post to populate our default use state values.
Let's write out some code and I think you'll understand what we're going to do here really quickly.
So to get started at the very top I'm going to import both you state and use context from react.
Then I'll also import our blog context so that I can pull out the blog post we're trying to edit remember
in order to edit a blog post.
We want to show the default title in content inside of those text inputs like right there and right
there.
And that's why we need to retrieve this existing blog post out of our context object so I'm going to
import
context from up one directory context BLOG.
THERE WE GO blog context will then reach into our context object.
We'll get our state from you as context with capital C. contexts.
And so now once again just like we did inside of our show screen we can iterate through all these different
posts and find one with the same I.D. as navigation get param I.D. so I'm going to write out that find
logic right here I'll say blog post is state DOT find we're gonna iterate over every blog post inside
that array and we're going to retrieve or return true for the first entry where blog post I.D. So blog
post dot I.D. is equal to navigation get Bahram I.D. So equal to navigation get param I.D.
All right.
That's going to be the blog post.
We want to edit so now we can start to initialize to different state variables inside of here.
So underneath blog post right there I'll say concert title and set title.
And now here's the real key.
Here's where this all turns into a real edit functionality.
Remember whenever we call you states we pass in the initial default value inside that.
So our initial default value for title is going to be this blog post title so inside of there I'll put
blog post dot title.
So when we first initialize our state property our title variable right here is going to be whatever
the title is off the blog post that we're trying to edit.
And that's pretty much it.
That's the secret then.
After that we'll also initialize content content and set content that will also be you state.
We'll do blog post dot content.
So now we've initialized both title and content to be whatever our blog post title and content are.
Now we can start to show our actual form down here with our two text labels and to text inputs.
So for that I'm going to once again import text input from React Native I'll then delete the text that
I have inside this existing one and replace it with edit title I'll then place my text input and I'll
give it a value of title because remember we are shoving the title down into text input and we will
also add in that on change text prop as well.
So this thing is going to be called with some new title and we'll take that new title.
These are just entered character by character and use it to call set title for a call set title with
new title okay.
So I think this is just about enough to actually start doing a little bit testing.
Let's make sure that we can actually show the text and put the first one right here and have the existing
title of our blog post appear in there so that the user can of course edit it.
So as usual save this plot back over tap on that blog post hit edit and there we go.
Says test post and even though it looks like that some plain text remember that actually is a text input.
So I can click in there and start changing some text around.
Same thing for Android as well.
So I'll do an edit tap in there and I can start editing it like so.
OK.
So this looks pretty good.
But even though it looks like it's working I want to point out something awkward right now.
Inside of the edit screen we're about to put together a form that has a text label while two text labels
and two text inputs.
And I'll be honest with you it really is starting to feel like we are recreating or re typing all the
exact same code that we had already placed inside of create screen.
Here's create screen inside of create screen.
We've got our two pieces of state that we initialized and then are two text labels in our two text inputs.
Now some of the text inside of here like we have enter title vs. edit title.
Some of those things are a little bit different but to be honest with you a lot of this is feeling just
about identical to code we already wrote inside of create screen.
And so I'm starting to wonder is there any opportunity here to maybe reuse some code between these two
different components.
I think there probably is.
So let's take a pause right here.
When we come back the next video we're gonna figure out if there's any way that we can somehow extract
some of the code that we already put into create screen into a new reusable component and then reuse
that component between both create screen and edit screen so quick pause and we'll take care of that
in the next video.