1
00:00:01,010 --> 00:00:06,200
We now need to make sure that our edit screen component also passes in an on submit callback to blog

2
00:00:06,200 --> 00:00:07,480
post form.

3
00:00:07,480 --> 00:00:13,170
Now remember at this time we don't actually have anything inside of our context file so blog context

4
00:00:13,170 --> 00:00:13,880
dot us.

5
00:00:13,970 --> 00:00:18,410
We don't have anything over here that's actually going to initiate an edit of a blog post.

6
00:00:18,680 --> 00:00:23,240
Nonetheless let's just make sure that we add in some called callback to our edit screen and pass it

7
00:00:23,240 --> 00:00:27,590
down into blog post form and then we will eventually come back to this thing and make sure that we take

8
00:00:27,590 --> 00:00:33,470
that updated title and content and pass it off to some function coming from our context object inside

9
00:00:33,500 --> 00:00:34,540
of edit screen.

10
00:00:34,610 --> 00:00:42,570
I'll find a blog post form I'm going to add on on submit this thing is gonna get called with our new

11
00:00:42,570 --> 00:00:49,810
title and new content and so inside of here for right now let's just do a console log of the updated

12
00:00:50,140 --> 00:00:54,580
title and whoops not council but content like so.

13
00:00:54,580 --> 00:00:58,330
So again eventually we have to come back and make sure we pass off the title and content to something

14
00:00:58,330 --> 00:00:59,300
from our context.

15
00:00:59,320 --> 00:01:01,330
We'll deal with that in just a moment.

16
00:01:01,330 --> 00:01:07,030
More importantly there is some other piece of customization we have to add into our edit screen remember

17
00:01:07,120 --> 00:01:13,780
our edit screen needs to somehow tell our blog post form what the initial form values are.

18
00:01:13,780 --> 00:01:17,320
So inside of our edit screen we need to take that blog post that we fetch.

19
00:01:17,410 --> 00:01:23,470
Remember that's the one right here and we need to take that things existing titling content and pass

20
00:01:23,470 --> 00:01:27,320
it down as some starting initial form values to our form.

21
00:01:27,390 --> 00:01:31,810
We already wired up code just about identical to this inside of our edit screen already.

22
00:01:32,040 --> 00:01:34,450
So we just need to essentially do this once again.

23
00:01:34,560 --> 00:01:41,060
But inside of blog post form I'm going to once again pass in some additional prop to blog post form

24
00:01:41,230 --> 00:01:41,540
again.

25
00:01:41,660 --> 00:01:45,020
I'm going to make up this prop name off the top my head I'm going to call it.

26
00:01:45,020 --> 00:01:48,090
How about initial values.

27
00:01:48,140 --> 00:01:52,580
So this will be some initial values to use inside the form for initial values.

28
00:01:52,590 --> 00:01:54,280
I'll pass in an object.

29
00:01:54,390 --> 00:02:01,880
So as usual two sets of curly braces and this will have a title coming from a blog post dot title

30
00:02:05,110 --> 00:02:11,600
and some content coming from blog post dot content.

31
00:02:11,640 --> 00:02:16,920
So now our blog post form is going to receive this new prop and we want to use this existing initial

32
00:02:16,920 --> 00:02:20,270
title and content to initialize our state values inside there.

33
00:02:20,280 --> 00:02:24,750
Remember that's going to make sure that our form has some starting value inside those inputs to make

34
00:02:24,750 --> 00:02:28,200
it into a true editing experience.

35
00:02:28,240 --> 00:02:33,310
So going to save edit screen we're then going to go over to a blog post form and receive that new prop

36
00:02:33,640 --> 00:02:35,950
and use it to initialize our state values.

37
00:02:36,040 --> 00:02:40,090
So inside a blog post forum I'll find my props argument right here.

38
00:02:40,240 --> 00:02:45,770
I'm going to d structure out initial values.

39
00:02:45,790 --> 00:02:50,940
Now here's something really important to keep in mind our edit screen is providing a prop of initial

40
00:02:50,940 --> 00:02:54,730
values and that's an object that has a title and content property.

41
00:02:54,750 --> 00:02:59,430
However our content screen is not providing initial values at all.

42
00:02:59,460 --> 00:03:05,310
So if we tried to now refer to this initial values object in some cases it will be an object with the

43
00:03:05,310 --> 00:03:09,090
title and content property which is what we want coming from the edit screen.

44
00:03:09,090 --> 00:03:14,780
But if we're coming from the create screen initial values is going to be undefined.

45
00:03:14,850 --> 00:03:21,540
So if we try to refer to something like initial values dot title we will get an error message that says

46
00:03:21,540 --> 00:03:25,360
something like can't refer to property title of undefined.

47
00:03:25,920 --> 00:03:28,200
So we're definitely going to have to take care of that somehow.

48
00:03:28,560 --> 00:03:30,330
We'll worry about that in just a moment.

49
00:03:30,570 --> 00:03:35,370
But right now let's just get our edit screen working and make sure that we can show the form and actually

50
00:03:35,370 --> 00:03:36,650
edit a value.

51
00:03:36,900 --> 00:03:42,120
So to assume that everything's going to work coming from the edit screen we can take that initial values

52
00:03:42,120 --> 00:03:46,150
object and refer to it inside of you states.

53
00:03:46,180 --> 00:03:50,560
We're going to pass in the default value or the starting value for our title variable.

54
00:03:50,620 --> 00:03:57,480
It's going to come from initial values dot title and we can do the same thing with content as well.

55
00:03:57,490 --> 00:04:03,540
So initial values dot content OK.

56
00:04:03,540 --> 00:04:08,090
Now our form is now only going to work if we come to it from the edit screen.

57
00:04:08,250 --> 00:04:12,690
If we come to it from the create screen like I just said initial values will be undefined and we'll

58
00:04:12,690 --> 00:04:15,060
end up with an error message nonetheless.

59
00:04:15,180 --> 00:04:18,990
Let's just test this out really quickly coming from edit screen OK.

60
00:04:19,040 --> 00:04:24,460
I'm gonna tap on this existing blog post and I'll tap on the Edit icon and sure enough I do have those

61
00:04:24,460 --> 00:04:25,340
values inside there.

62
00:04:25,360 --> 00:04:25,960
Very good.

63
00:04:26,020 --> 00:04:30,670
Now I can edit those and even though I can technically tap on same blog post that's not going to actually

64
00:04:30,670 --> 00:04:33,860
really do anything right now besides that console log.

65
00:04:33,860 --> 00:04:37,480
OK so this stuff only works for right now but we definitely need to make sure that we've got some better

66
00:04:37,480 --> 00:04:41,680
solution to avoid crashing if we come to this component from create screen.

67
00:04:41,680 --> 00:04:45,550
And just to demonstrate that actually is the case I'm gonna go back to the index page.

68
00:04:45,550 --> 00:04:51,670
Tap on the plus icon in Yeah sure enough undefined as an object when we read initial values dot title.

69
00:04:51,670 --> 00:04:55,210
So let's take another quick pause right here when we come back the next video we'll figure out some

70
00:04:55,210 --> 00:04:57,970
way to avoid crashing when coming from the create screen.