In this video we're going to very quickly put together our edit screen the edit screen is going to end
up being very similar to our create screen.
We're going to have two pieces of state two text inputs two text labels and so on.
All right.
So I'm gonna go back to My screen's directory inside there I'll make a new file called edit screen dot
J.S. and then hey you guessed it for the millionth time.
Well let's throw some boilerplate inside of here.
So we'll get react from react.
We'll get view text style sheet from React Native.
We'll get our edit screen return.
A view that has a text that says edit screen read our styles object and export default.
Edit screen.
I'm really curious can you type that stuff out faster than I.
Maybe you're smarter than I and you're just going to copy pasting the stuff from somewhere else.
Hopefully you're doing that as opposed to having to write it out every time.
Well at any rate we've got the edit screen put together so let's pull back over to our apt jazz file
and wire this thing up to our navigator.
So inside of APT.
J.S. yep let's get that import import.
Edit screen from source screens.
Edit screen and then wired up to our stack navigator so.
Edit Is edit screen and that should be at hit.
So let's save this.
We'll do a quick test.
Once again we have to create a post I'll add the post tap that thing.
Tap the pencil icon and now we go to the edit screen.
Very good.
Now there's two things on a mention really quickly here.
First off chances are you're noticing that having to create a blog post every time you want to test
out this edit functionality is super tedious.
So a way that we can get around that is to just open up our blog context remember inside a blog context
we call create data context right here.
And as the third argument we pass in our initial state if we want to we could actually put in some default
blog post to appear when our application is first loaded.
Now this might not be something we want to deploy for a production version application but it would
definitely help out with this testing environment.
So inside of this array right here I can put in an object with the title of test post some content of
test content and then maybe you'd like an idea of simply one like So now anytime we load up our application
we're always going to have one test blog post inside there so we can save this.
And now in our application reloads yep there's our test post.
So now to edit this thing we can very easily hit edit or see me tap on the thing and then hit the edit
button so it definitely saves just a little bit of time.
Now the second thing I wanna mention is that we're once again in a scenario where we've got a screen
that needs to know what blog post it's supposed to show.
We've already dealt with this with these show screen once before remember when we navigate from the
index page to the show screen.
We pass along a parameter that tells the show screen what the current I.D. or the idea the blog post
is that the shows screen should display.
We need to do something very similar for edit as well.
So anytime we navigate from show to edit we need to pass along a parameter and tell the edit screen
exactly what idea of blog post it's supposed to be displaying right here and attempt to edit.
So to do so we need to go back to where we tap on that little Edit icon and make sure that we pass through
the idea of the posts that we want to actually see all right.
So back inside of my edit screen or see my show screen.
Here it is right here.
We can once again go down to our navigation options.
Now in this scenario life is just a little bit crazy here.
Remember insight of our component.
To figure out what the idea is of inside the show screen the idea the blog posts we're supposed to show.
We did that navigation prop and we called Get param with I.D. because our index screen told the show
screen what blog post to show.
So it turns out we can essentially use that exact same variable inside of the things navigation options
because remember we get access to that same navigation prop so inside of our touchable opacity we can
extend our navigate call as a second argument.
We could put in an object that's going to have an I.D. property and that I.D. will come from navigation.
I was going to write out all the text here and I'll show it to you where you can read it very easily.
So navigation get pram I.D. like so and then I'm going to save that.
So it wraps and you can hopefully see everything very easily on a single line
OK.
So once again whenever we tap on the opacity or anything inside of it we run on press inside there we're
going to call navigation navigate we're going to pass on the I.D. of the blog post.
We want to show it.
So it looks good.
So now our edit screen should be receiving the same kind of thing right here.
We should be able to call navigation get param with I.D. and receive whatever we just pass through.
So back inside of edit screen let's receive that navigation prop
all then inside this text element let's just print out the I.D. of whatever blog post were supposed
to be editing.
So inside of here I will do navigation get param with I.D. hey let's save this we'll do a quick test.
Remember my default blog post right here has an idea of one.
So on my edit screen I'll expect to see edit screen dash one if everything is working as expected.
So I'll top that thing tap on edit and there we go.
My blog post I.D. is reflected there.
It's now our edit screen knows exactly what it is supposed to be editing.
Let's perfect.
OK.
So that's pretty much it for some initial setup on the edit screen.
It's now just about everything else inside of here is going to be somewhat similar to our create screen
where we're going to have those two pieces of states.
We're gonna have our two text labels in our two text inputs as well so quick pause right here and we'll
start working on the edit screen in just a moment.