1
00:00:00,840 --> 00:00:01,100
All right.

2
00:00:01,110 --> 00:00:05,490
My friends in this video we're going to make sure that our edit screen shows a form that a user can

3
00:00:05,490 --> 00:00:08,220
use to actually edit an existing blog post.

4
00:00:08,250 --> 00:00:10,950
There's a couple of interesting things we have to do inside of here.

5
00:00:10,950 --> 00:00:15,540
First off we need to make sure that when our component is first rendered we reach into our context object

6
00:00:15,750 --> 00:00:19,200
and retrieve whatever blog post we're trying to edit.

7
00:00:19,200 --> 00:00:25,770
We're then going to use that existing blog post to populate our default use state values.

8
00:00:25,790 --> 00:00:29,530
Let's write out some code and I think you'll understand what we're going to do here really quickly.

9
00:00:29,530 --> 00:00:35,700
So to get started at the very top I'm going to import both you state and use context from react.

10
00:00:36,740 --> 00:00:42,350
Then I'll also import our blog context so that I can pull out the blog post we're trying to edit remember

11
00:00:42,350 --> 00:00:43,750
in order to edit a blog post.

12
00:00:43,760 --> 00:00:49,370
We want to show the default title in content inside of those text inputs like right there and right

13
00:00:49,370 --> 00:00:49,810
there.

14
00:00:49,940 --> 00:00:55,600
And that's why we need to retrieve this existing blog post out of our context object so I'm going to

15
00:00:55,600 --> 00:00:56,140
import

16
00:00:59,700 --> 00:01:06,110
context from up one directory context BLOG.

17
00:01:06,200 --> 00:01:13,950
THERE WE GO blog context will then reach into our context object.

18
00:01:14,080 --> 00:01:22,230
We'll get our state from you as context with capital C. contexts.

19
00:01:22,300 --> 00:01:26,830
And so now once again just like we did inside of our show screen we can iterate through all these different

20
00:01:26,830 --> 00:01:33,670
posts and find one with the same I.D. as navigation get param I.D. so I'm going to write out that find

21
00:01:33,670 --> 00:01:42,160
logic right here I'll say blog post is state DOT find we're gonna iterate over every blog post inside

22
00:01:42,160 --> 00:01:48,250
that array and we're going to retrieve or return true for the first entry where blog post I.D. So blog

23
00:01:48,250 --> 00:01:57,430
post dot I.D. is equal to navigation get Bahram I.D. So equal to navigation get param I.D.

24
00:02:01,150 --> 00:02:01,420
All right.

25
00:02:01,450 --> 00:02:02,640
That's going to be the blog post.

26
00:02:02,640 --> 00:02:08,440
We want to edit so now we can start to initialize to different state variables inside of here.

27
00:02:08,470 --> 00:02:14,290
So underneath blog post right there I'll say concert title and set title.

28
00:02:14,290 --> 00:02:15,340
And now here's the real key.

29
00:02:15,340 --> 00:02:18,320
Here's where this all turns into a real edit functionality.

30
00:02:18,340 --> 00:02:23,680
Remember whenever we call you states we pass in the initial default value inside that.

31
00:02:23,680 --> 00:02:30,360
So our initial default value for title is going to be this blog post title so inside of there I'll put

32
00:02:30,370 --> 00:02:32,670
blog post dot title.

33
00:02:33,010 --> 00:02:38,110
So when we first initialize our state property our title variable right here is going to be whatever

34
00:02:38,140 --> 00:02:41,180
the title is off the blog post that we're trying to edit.

35
00:02:41,410 --> 00:02:42,340
And that's pretty much it.

36
00:02:42,370 --> 00:02:44,970
That's the secret then.

37
00:02:45,010 --> 00:02:54,250
After that we'll also initialize content content and set content that will also be you state.

38
00:02:54,280 --> 00:02:57,810
We'll do blog post dot content.

39
00:02:57,860 --> 00:03:02,640
So now we've initialized both title and content to be whatever our blog post title and content are.

40
00:03:02,700 --> 00:03:08,510
Now we can start to show our actual form down here with our two text labels and to text inputs.

41
00:03:08,570 --> 00:03:16,140
So for that I'm going to once again import text input from React Native I'll then delete the text that

42
00:03:16,150 --> 00:03:25,330
I have inside this existing one and replace it with edit title I'll then place my text input and I'll

43
00:03:25,330 --> 00:03:32,260
give it a value of title because remember we are shoving the title down into text input and we will

44
00:03:32,260 --> 00:03:35,800
also add in that on change text prop as well.

45
00:03:36,510 --> 00:03:41,400
So this thing is going to be called with some new title and we'll take that new title.

46
00:03:41,400 --> 00:03:48,450
These are just entered character by character and use it to call set title for a call set title with

47
00:03:48,540 --> 00:03:51,720
new title okay.

48
00:03:51,750 --> 00:03:55,280
So I think this is just about enough to actually start doing a little bit testing.

49
00:03:55,380 --> 00:04:00,150
Let's make sure that we can actually show the text and put the first one right here and have the existing

50
00:04:00,150 --> 00:04:03,640
title of our blog post appear in there so that the user can of course edit it.

51
00:04:04,410 --> 00:04:10,120
So as usual save this plot back over tap on that blog post hit edit and there we go.

52
00:04:10,140 --> 00:04:14,600
Says test post and even though it looks like that some plain text remember that actually is a text input.

53
00:04:14,610 --> 00:04:18,150
So I can click in there and start changing some text around.

54
00:04:18,180 --> 00:04:19,560
Same thing for Android as well.

55
00:04:19,740 --> 00:04:24,630
So I'll do an edit tap in there and I can start editing it like so.

56
00:04:24,630 --> 00:04:24,850
OK.

57
00:04:24,870 --> 00:04:26,490
So this looks pretty good.

58
00:04:26,490 --> 00:04:30,470
But even though it looks like it's working I want to point out something awkward right now.

59
00:04:31,480 --> 00:04:37,840
Inside of the edit screen we're about to put together a form that has a text label while two text labels

60
00:04:37,870 --> 00:04:39,300
and two text inputs.

61
00:04:39,500 --> 00:04:44,920
And I'll be honest with you it really is starting to feel like we are recreating or re typing all the

62
00:04:44,980 --> 00:04:49,390
exact same code that we had already placed inside of create screen.

63
00:04:49,390 --> 00:04:51,860
Here's create screen inside of create screen.

64
00:04:52,000 --> 00:04:58,930
We've got our two pieces of state that we initialized and then are two text labels in our two text inputs.

65
00:04:58,930 --> 00:05:03,610
Now some of the text inside of here like we have enter title vs. edit title.

66
00:05:03,610 --> 00:05:07,930
Some of those things are a little bit different but to be honest with you a lot of this is feeling just

67
00:05:07,930 --> 00:05:11,710
about identical to code we already wrote inside of create screen.

68
00:05:11,860 --> 00:05:16,810
And so I'm starting to wonder is there any opportunity here to maybe reuse some code between these two

69
00:05:16,810 --> 00:05:18,140
different components.

70
00:05:18,160 --> 00:05:19,650
I think there probably is.

71
00:05:19,660 --> 00:05:20,850
So let's take a pause right here.

72
00:05:20,860 --> 00:05:25,120
When we come back the next video we're gonna figure out if there's any way that we can somehow extract

73
00:05:25,180 --> 00:05:31,060
some of the code that we already put into create screen into a new reusable component and then reuse

74
00:05:31,060 --> 00:05:36,730
that component between both create screen and edit screen so quick pause and we'll take care of that

75
00:05:36,730 --> 00:05:37,480
in the next video.