1
00:00:01,110 --> 00:00:06,750
A user can now navigate over to our create screen which means it needs to display a form to the user

2
00:00:07,050 --> 00:00:10,080
that will allow them to add in a title of a new blog post.

3
00:00:10,170 --> 00:00:12,210
In some amount of content for it as well.

4
00:00:12,220 --> 00:00:16,560
Now I want to once again remind you that our blog posts do not currently have a content property but

5
00:00:16,560 --> 00:00:18,350
we're going to add it in quite easily.

6
00:00:19,080 --> 00:00:19,320
OK.

7
00:00:19,350 --> 00:00:24,270
So to get started I'm going to open up my create screen J.S. file and inside of here we're going to

8
00:00:24,270 --> 00:00:27,270
first just focus on showing a form to the user.

9
00:00:27,270 --> 00:00:32,400
So we're going to have to show a text label and we're gonna have to show a text input as well.

10
00:00:32,400 --> 00:00:34,810
We've already got the text imported inside of here.

11
00:00:34,870 --> 00:00:42,200
It's going to add in one additional import for text input and then going to place a text input right

12
00:00:42,200 --> 00:00:44,780
after the existing text element that we have.

13
00:00:44,930 --> 00:00:50,990
And I'm going to copy paste both those elements down one time and I'll update the text on both these.

14
00:00:51,020 --> 00:00:57,560
So the first one will be enter title and the second one can be enter content

15
00:01:00,370 --> 00:01:00,670
OK.

16
00:01:00,730 --> 00:01:02,160
That looks good.

17
00:01:02,160 --> 00:01:07,050
Next up we probably want to make sure that we have some kind of state variable that's going to control

18
00:01:07,110 --> 00:01:09,510
this text input in this one as well.

19
00:01:09,510 --> 00:01:13,530
Even though we are making use of context here and we're trying to centralize all of our state in one

20
00:01:13,530 --> 00:01:19,320
location we can still have local state inside of one single component to control the text that's being

21
00:01:19,320 --> 00:01:20,770
entered inside there.

22
00:01:20,820 --> 00:01:26,490
Remember this process of adding in some state to a text input is referred to turning that thing into

23
00:01:26,490 --> 00:01:28,350
a controlled input.

24
00:01:28,470 --> 00:01:37,040
So I'm going to import my use state helper from react at the top and then inside of create screen I'm

25
00:01:37,040 --> 00:01:42,200
going to initialize two different pieces of state one to handle the title entry and one to handle the

26
00:01:42,230 --> 00:01:43,580
content entry.

27
00:01:43,580 --> 00:01:50,740
So I'll do const title and set title is you state and I'll use a default of an empty string and then

28
00:01:50,740 --> 00:01:58,860
I'll do const content and set content will be you state as well with an empty string.

29
00:01:58,870 --> 00:02:04,540
Now we can wire up the value prop and the unchanged text prop to both of our different text inputs and

30
00:02:04,540 --> 00:02:08,880
make sure that they use the appropriate values from both the state calls.

31
00:02:09,240 --> 00:02:15,070
So on the first one I'll add in a value of title remember the idea here is that we are telling the text

32
00:02:15,070 --> 00:02:22,540
input what the current value is and we'll also add in on change text and whenever we receive some new

33
00:02:22,540 --> 00:02:27,010
text we will use it to update our title state.

34
00:02:27,010 --> 00:02:34,180
So it calls that title with that text like so now we can do the same thing with the second text input.

35
00:02:34,550 --> 00:02:44,980
So on the second one I'll do my value of content and on change text will come from text and we're gonna

36
00:02:44,980 --> 00:02:51,720
pass that into set content with text like so as well okay.

37
00:02:51,740 --> 00:02:53,000
So that should definitely get us started.

38
00:02:53,150 --> 00:03:00,170
So going to save this and I'll flip back over to my device I'll change to the screen screen I see the

39
00:03:00,170 --> 00:03:05,570
two labels and remember by default a text input doesn't really show up so I can still tap inside there

40
00:03:05,570 --> 00:03:09,800
very carefully I should see that cursor and I can start entering and some text in both those different

41
00:03:09,800 --> 00:03:16,900
fields and I'll do a quick test on Android as well so I can tap in there yep looks good and looks good.

42
00:03:17,090 --> 00:03:19,980
So even though I said that yep styling is not gonna be a focus here.

43
00:03:20,000 --> 00:03:23,880
Well we probably still want to make sure that a user can easily see that text input.

44
00:03:23,930 --> 00:03:28,700
So let's just add in a couple of styles really quickly down inside my style sheet.

45
00:03:28,880 --> 00:03:35,430
I'll add in an input section I'm going to give this thing a increased font size just to make it easier

46
00:03:35,430 --> 00:03:42,030
to enter stuff into let's do like 18 or so and we'll add in a border as well so we'll do a border width

47
00:03:42,090 --> 00:03:50,910
of 1 and a border color of black just to be very specific I'm also gonna add in a quick style for our

48
00:03:50,910 --> 00:03:55,800
two labels as well so enter in a new section called label.

49
00:03:55,800 --> 00:04:02,980
I'll give this one a font size of 20 even a little bit larger I'll put a little bit of padding actually

50
00:04:03,030 --> 00:04:12,480
about this margin right underneath it so I'll do margin bottom of about 10 units and we can apply both

51
00:04:12,500 --> 00:04:15,990
these two are two labels in our two text inputs.

52
00:04:16,020 --> 00:04:17,180
It's on the text input.

53
00:04:17,340 --> 00:04:21,540
I'll do a style of styles dot or see me on the text element.

54
00:04:21,600 --> 00:04:27,680
We're gonna use style dot label and I'll repeat that on the second text element as well.

55
00:04:27,960 --> 00:04:37,530
So styles label and then on both the text inputs we can do style of styles dot input and I'll duplicate

56
00:04:37,530 --> 00:04:39,260
that onto the second one as well.

57
00:04:42,100 --> 00:04:46,780
So label input label input all right.

58
00:04:46,810 --> 00:04:52,920
Let's save this and I'll test out once again and OK that's looking a little bit better.

59
00:04:52,930 --> 00:04:55,870
I think we could probably improve this a little bit more.

60
00:04:56,080 --> 00:04:58,900
Let's just add in just one last little take your on styling.

61
00:04:58,900 --> 00:05:03,790
So I think maybe the margin bottom on the label is a bit too much going to decrease it just to about

62
00:05:03,790 --> 00:05:09,780
five and then underneath each input I'll put in a margin bottom as well just to separate both them.

63
00:05:09,840 --> 00:05:15,280
I'll put in a much larger margin bottom 15 and then on the input also put in a little bit of padding

64
00:05:15,670 --> 00:05:19,780
on that border as well just to get a little bit spacing between the text and the border.

65
00:05:20,050 --> 00:05:24,730
So I'll do some padding of 5 and let's just throw on some margin as well.

66
00:05:24,760 --> 00:05:30,130
5 that will override or similarly margin bottom should override the overall margin right there.

67
00:05:32,680 --> 00:05:35,900
Let's save this desktop one more time.

68
00:05:36,240 --> 00:05:36,630
Okay.

69
00:05:36,690 --> 00:05:41,350
Looks good but still that label and just want have a little bit of separation on the left hand side.

70
00:05:41,400 --> 00:05:43,880
Also put in some margin left of 5.

71
00:05:44,010 --> 00:05:45,960
That should be at last change.

72
00:05:46,020 --> 00:05:46,280
Okay.

73
00:05:46,290 --> 00:05:51,590
Looks reasonable good enough for what we are doing it's now a user can enter in some input into either

74
00:05:51,590 --> 00:05:56,100
of those text inputs and then after they enter that in we want to show a button that they can actually

75
00:05:56,100 --> 00:05:59,070
use to add in or create the new blog post.

76
00:05:59,130 --> 00:06:03,790
So let's just very quickly make sure that we can show a button inside of here as well at the very top.

77
00:06:03,810 --> 00:06:04,800
I'll find React Native.

78
00:06:04,830 --> 00:06:12,880
Once again I'll enter in an additional import of button and then underneath the second text input I'll

79
00:06:12,880 --> 00:06:17,440
show a button with a title of ADD blog post

80
00:06:20,240 --> 00:06:23,620
and right now we'll just leave off the on press handler.

81
00:06:23,670 --> 00:06:26,340
Let's say this once again final test.

82
00:06:26,430 --> 00:06:27,720
Yep looks good.

83
00:06:27,930 --> 00:06:33,150
And on Android yep that looks reasonable as well.

84
00:06:33,200 --> 00:06:33,420
OK.

85
00:06:33,460 --> 00:06:35,100
So we've got our form put together.

86
00:06:35,100 --> 00:06:36,400
So let's take another pause right here.

87
00:06:36,410 --> 00:06:40,250
When we come back the next video we're gonna make sure that after a user enters a title and some content

88
00:06:40,580 --> 00:06:46,490
and they tap that button we will add in the new blog post and navigate the user back over to our big

89
00:06:46,490 --> 00:06:48,320
list of blog posts over here.

90
00:06:48,320 --> 00:06:50,970
So click pauses and take care of that in just a moment.