1
00:00:00,880 --> 00:00:01,260
All right.

2
00:00:01,270 --> 00:00:04,550
I think you know exactly what we have to do because I've repeated it three times now.

3
00:00:04,600 --> 00:00:09,280
Let's make sure that create an edit pass down some props to our blog post form to come out customize

4
00:00:09,280 --> 00:00:12,520
what happens when it is shown inside of either those.

5
00:00:12,580 --> 00:00:16,270
So first start off with create because I think we've got a pretty good idea of what's going on inside

6
00:00:16,280 --> 00:00:17,870
their OKAY.

7
00:00:17,890 --> 00:00:19,480
SO I GOT TO GO BACK TO MY create screen.

8
00:00:19,510 --> 00:00:21,100
Here it is right here.

9
00:00:21,100 --> 00:00:26,590
So we need to formulate some set of props that we're gonna pass into add a blog post form the first

10
00:00:26,590 --> 00:00:28,070
prop I think we should add in.

11
00:00:28,120 --> 00:00:32,320
And remember I'm just gonna make up the name of these different props off the top of my head.

12
00:00:32,320 --> 00:00:38,740
So I think a reasonable name for a prop to call that we're going to eventually pass like this on submit

13
00:00:38,770 --> 00:00:44,340
callback to would be simply on submit it's going to pass on submit a function.

14
00:00:44,460 --> 00:00:50,070
And the idea here is that anytime that the user submits the form I want to have my blog post form invoke

15
00:00:50,100 --> 00:00:55,380
this on submit prop so inside of here I'll put in a body to the Arrow function.

16
00:00:55,390 --> 00:01:00,920
So that's just gonna be the extra set of curly braces and then we're going to do the exact same thing

17
00:01:00,920 --> 00:01:04,420
that we did when all of our logic was inside of create screen.

18
00:01:04,610 --> 00:01:10,670
We're going to call add blog post we're going to pass in the new title and content that the user just

19
00:01:10,670 --> 00:01:11,660
provided.

20
00:01:11,660 --> 00:01:16,250
And we're also going to make sure that we pass in a callback to navigate back to the index screen using

21
00:01:16,250 --> 00:01:17,960
that navigation prop.

22
00:01:17,960 --> 00:01:19,440
Now there is one little catch here.

23
00:01:19,550 --> 00:01:25,040
I just said two seconds ago we're gonna call at blog post with the new title and content but inside

24
00:01:25,040 --> 00:01:29,040
of create screen we don't know what the edited title and content are.

25
00:01:29,060 --> 00:01:33,110
So I think that we need to put in an additional requirement to our on submit function.

26
00:01:33,110 --> 00:01:39,230
We need to make sure that whenever blog post form calls on submit it has to pass in the new updated

27
00:01:39,560 --> 00:01:46,060
title and content or excuse me not updated because this is the create screen.

28
00:01:46,060 --> 00:01:48,720
But whatever title and content the user typed into the form.

29
00:01:49,570 --> 00:01:49,810
OK.

30
00:01:49,840 --> 00:01:55,700
So inside of this callback we'll now call add blog post.

31
00:01:56,010 --> 00:02:02,010
We can pass in the title and content that was provided to our callback function right here and then

32
00:02:02,010 --> 00:02:07,230
we can put in our third argument which remember is going to be a callback that will execute our navigation

33
00:02:07,230 --> 00:02:10,590
dot navigate function and go back to our index screen.

34
00:02:10,590 --> 00:02:20,590
So I'll put in my callback function that we'll call navigation dot navigate and we'll go back to index.

35
00:02:20,620 --> 00:02:20,860
OK.

36
00:02:20,890 --> 00:02:22,570
So now let's save this.

37
00:02:22,990 --> 00:02:27,670
We'll go into a blog post form and we're going to make sure that any time a user taps on that submit

38
00:02:27,670 --> 00:02:32,000
button we call on submit with a new title and content.

39
00:02:32,310 --> 00:02:37,420
So inside a blog post form remember we initialize these two state variables title and content right

40
00:02:37,420 --> 00:02:38,280
here.

41
00:02:38,560 --> 00:02:43,030
We'll go down to our button here's the button and I'm going to add on that new prop

42
00:02:46,530 --> 00:02:54,790
of on press and inside of here we're going to run our on submit callback that was passed in as a prop

43
00:02:54,790 --> 00:02:56,830
2 blog post form.

44
00:02:56,830 --> 00:03:04,010
And when we run this thing we're gonna make sure that we provide the title and content that the user

45
00:03:04,010 --> 00:03:04,760
just entered.

46
00:03:04,760 --> 00:03:07,870
So essentially our title and content state variables.

47
00:03:07,910 --> 00:03:12,540
Now one quick thing I did not actually receive this on submit prop at the top of the function.

48
00:03:12,620 --> 00:03:17,690
So let's make sure that we do structure on submit out of our props object to backup here.

49
00:03:17,690 --> 00:03:25,580
Here's our props or our arguments I'm going a d structure out on submit like so OK so I'll save this.

50
00:03:25,580 --> 00:03:29,090
And this should now work correctly for our create screen.

51
00:03:29,090 --> 00:03:33,680
So once again when we show our blog post form we are saying here's a function to call anytime a user

52
00:03:33,740 --> 00:03:38,660
submits the form and the expectation is that that function will be called with the title and content

53
00:03:38,660 --> 00:03:39,730
that the user just entered.

54
00:03:40,250 --> 00:03:43,970
So we're still at the end the day essentially running the exact same code that we were running before

55
00:03:44,210 --> 00:03:47,570
when we had all of our form logic inside the create screen.

56
00:03:47,570 --> 00:03:47,780
OK.

57
00:03:47,810 --> 00:03:53,900
So a quick test a flip back over remember right now only the create screen should be working edit screen

58
00:03:53,930 --> 00:03:55,180
is not going to work.

59
00:03:55,220 --> 00:04:03,350
So going to go to create all entering a new title and some amount of content will save the post.

60
00:04:03,350 --> 00:04:08,520
And there we go there's my new title it's showing up there's my randomly generated idea as well and

61
00:04:08,570 --> 00:04:13,110
if I tap on that I should see my content right there underneath the new title.

62
00:04:13,190 --> 00:04:14,810
Very good.

63
00:04:14,810 --> 00:04:16,790
Now we've got our great screen put together.

64
00:04:16,910 --> 00:04:20,750
We can start to focus once again on the edit screen so quick pause.

65
00:04:20,780 --> 00:04:22,970
I'll take care of edit screen in just a moment.