- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.660 --> 00:00:04.010
Now that we built our post image picker styles,
2
00:00:04.010 --> 00:00:07.350
now it's time to build out the layout for our form.
3
00:00:07.350 --> 00:00:10.740
So our form is gonna look quite a bit different by
4
00:00:10.740 --> 00:00:11.890
the end of this guide,
5
00:00:11.890 --> 00:00:13.560
and I think it's gonna look pretty good.
6
00:00:13.560 --> 00:00:18.090
So let's open up our styles directory.
7
00:00:18.090 --> 00:00:22.610
And let's go see where we want to put our form styles.
8
00:00:22.610 --> 00:00:26.420
So we have our styles directory, we have stacks posts.
9
00:00:26.420 --> 00:00:28.210
And I think this is gonna make the most sense,
10
00:00:28.210 --> 00:00:30.830
to put a new file here called
11
00:00:30.830 --> 00:00:35.220
post form styles dot ts.
12
00:00:35.220 --> 00:00:40.220
And inside of here, we're going to import the style sheet,
13
00:00:41.530 --> 00:00:43.103
from react native.
14
00:00:46.230 --> 00:00:48.810
And then let's actually export it as well.
15
00:00:48.810 --> 00:00:53.160
So we'll say export default style sheet
16
00:00:54.170 --> 00:00:55.230
dot create.
17
00:00:55.230 --> 00:00:56.640
Which is a function
18
00:00:56.640 --> 00:01:00.690
and the function takes a single argument which is an object.
19
00:01:00.690 --> 00:01:03.930
And so that is gonna be those cali brackets there.
20
00:01:03.930 --> 00:01:06.240
So before we start writing any code,
21
00:01:06.240 --> 00:01:09.120
let's walk through what we wanna have happen.
22
00:01:09.120 --> 00:01:13.070
So we know we want a container for the entire component.
23
00:01:13.070 --> 00:01:15.550
So that's one thing that we're gonna create.
24
00:01:15.550 --> 00:01:18.820
So let's start as we're talking through it,
25
00:01:18.820 --> 00:01:20.530
let's actually name these.
26
00:01:20.530 --> 00:01:23.190
So we're gonna have a container,
27
00:01:23.190 --> 00:01:25.610
not gonna add any actual code inside of it.
28
00:01:25.610 --> 00:01:27.160
First, let's just name 'em.
29
00:01:27.160 --> 00:01:30.670
Then I know that I wanna have a grid here.
30
00:01:30.670 --> 00:01:34.580
So we wanna have our image or icon here.
31
00:01:34.580 --> 00:01:37.400
And then I wanna have on the right hand side,
32
00:01:37.400 --> 00:01:39.670
these form elements, and that's a grid.
33
00:01:39.670 --> 00:01:41.670
So let's just call it that.
34
00:01:41.670 --> 00:01:45.040
So now we're gonna have a form grid,
35
00:01:45.040 --> 00:01:47.280
which is also gonna be an object.
36
00:01:47.280 --> 00:01:50.770
And then we have some input wrappers.
37
00:01:50.770 --> 00:01:53.800
So we have a regular input wrapper.
38
00:01:53.800 --> 00:01:57.120
And then we're also gonna have a text area input.
39
00:01:57.120 --> 00:02:00.470
And so, we're gonna definitely need wrappers
40
00:02:00.470 --> 00:02:01.470
for those inputs.
41
00:02:01.470 --> 00:02:06.053
So let's just say text input wrapper.
42
00:02:07.100 --> 00:02:10.210
And then we have input elements.
43
00:02:10.210 --> 00:02:12.160
So we have our name,
44
00:02:12.160 --> 00:02:14.110
which is gonna be our main input element.
45
00:02:14.110 --> 00:02:15.830
So let's do that.
46
00:02:15.830 --> 00:02:17.963
So input element.
47
00:02:18.800 --> 00:02:20.890
That's gonna be an object.
48
00:02:20.890 --> 00:02:24.500
And then we're gonna have some special styles
49
00:02:24.500 --> 00:02:25.520
for our text area.
50
00:02:25.520 --> 00:02:29.170
So let's create one just for our text area,
51
00:02:29.170 --> 00:02:30.823
text area element.
52
00:02:32.700 --> 00:02:35.540
And then lastly, we have our button here.
53
00:02:35.540 --> 00:02:37.680
I don't wanna go in from side to side.
54
00:02:37.680 --> 00:02:40.320
I wanna have it wrapped up in a component.
55
00:02:40.320 --> 00:02:43.450
So let's call that our button wrapper.
56
00:02:43.450 --> 00:02:46.220
So button wrapper.
57
00:02:46.220 --> 00:02:48.400
Okay, so those are gonna be,
58
00:02:48.400 --> 00:02:50.290
as far as I can think of,
59
00:02:50.290 --> 00:02:53.260
those are gonna be each of those style elements
60
00:02:53.260 --> 00:02:54.250
that we're gonna need.
61
00:02:54.250 --> 00:02:58.840
So I'm gonna hit save, and let's go import these.
62
00:02:58.840 --> 00:03:01.020
So I'm gonna come all the way up to the top.
63
00:03:01.020 --> 00:03:03.790
And then let's import
64
00:03:03.790 --> 00:03:07.400
our post form styles
65
00:03:07.400 --> 00:03:12.080
and do this from dot dot slash styles,
66
00:03:12.080 --> 00:03:14.610
stacks, posts,
67
00:03:14.610 --> 00:03:17.520
post form styles.
68
00:03:17.520 --> 00:03:21.140
And then just to make our code a little bit more readable,
69
00:03:21.140 --> 00:03:25.130
let's actually extract each of those items.
70
00:03:25.130 --> 00:03:26.880
So let's come here,
71
00:03:26.880 --> 00:03:30.480
and I'm just gonna grab each of these names here.
72
00:03:30.480 --> 00:03:32.870
And let's paste them in.
73
00:03:32.870 --> 00:03:35.310
So we're gonna do some destructuring.
74
00:03:35.310 --> 00:03:38.340
So say const, and then as an object,
75
00:03:38.340 --> 00:03:39.710
paste each of these names,
76
00:03:39.710 --> 00:03:43.080
and then where it says colon to a comma,
77
00:03:43.080 --> 00:03:45.653
let's just get rid of all of that.
78
00:03:53.870 --> 00:03:56.090
And then we're going to set that equal
79
00:03:56.090 --> 00:03:59.330
to our post form styles.
80
00:03:59.330 --> 00:04:01.770
Okay, so Looks like all that's working.
81
00:04:01.770 --> 00:04:03.830
Each one of these little warnings,
82
00:04:03.830 --> 00:04:06.800
is just saying that those are unused.
83
00:04:06.800 --> 00:04:08.970
Which we know 'cause we haven't called those yet.
84
00:04:08.970 --> 00:04:10.870
Okay, so hit save,
85
00:04:10.870 --> 00:04:13.510
and we, doesn't look like we have any errors.
86
00:04:13.510 --> 00:04:16.970
Let's move down to our component itself.
87
00:04:16.970 --> 00:04:19.240
And let's see what we're gonna need.
88
00:04:19.240 --> 00:04:21.480
So, first and foremost,
89
00:04:21.480 --> 00:04:23.300
we do not wanna use a view tag.
90
00:04:23.300 --> 00:04:27.110
Because if someone's viewing this on a very small screen,
91
00:04:27.110 --> 00:04:30.810
they're not gonna see everything that they have there.
92
00:04:30.810 --> 00:04:32.300
If it's a very small screen.
93
00:04:32.300 --> 00:04:35.470
So make sure to import a scroll view.
94
00:04:35.470 --> 00:04:36.960
So let's go at the very top,
95
00:04:36.960 --> 00:04:39.450
and I'm gonna get rid of where it says text there.
96
00:04:39.450 --> 00:04:41.260
'Cause we're not using that anyway,
97
00:04:41.260 --> 00:04:43.170
and import the scroll view.
98
00:04:43.170 --> 00:04:47.220
And that's what we're gonna use for this container here.
99
00:04:47.220 --> 00:04:50.070
So I'll say that this is gonna be a scroll view
100
00:04:50.070 --> 00:04:52.470
and then make sure at the very end,
101
00:04:52.470 --> 00:04:55.110
that, that also gets used.
102
00:04:55.110 --> 00:04:59.190
Okay, so now our first style is going to be the same one.
103
00:04:59.190 --> 00:05:03.793
It's gonna be 100% but now let's use our container style.
104
00:05:05.210 --> 00:05:07.090
So hit save.
105
00:05:07.090 --> 00:05:08.270
Nothing changed.
106
00:05:08.270 --> 00:05:09.600
And that's why we want it.
107
00:05:09.600 --> 00:05:11.940
We don't have any errors either there.
108
00:05:11.940 --> 00:05:13.960
Okay, so now that we have our container,
109
00:05:13.960 --> 00:05:15.880
now let's build our grid.
110
00:05:15.880 --> 00:05:18.720
So the way it's gonna work is we're gonna have,
111
00:05:18.720 --> 00:05:21.540
our icon or image on the left hand side.
112
00:05:21.540 --> 00:05:23.100
And then on the right hand side,
113
00:05:23.100 --> 00:05:25.610
we want our two form elements.
114
00:05:25.610 --> 00:05:29.030
So let's actually create that here.
115
00:05:29.030 --> 00:05:31.360
And then we're gonna go add the styles.
116
00:05:31.360 --> 00:05:35.120
So on the top, right below where it says scroll view,
117
00:05:35.120 --> 00:05:38.320
I'm going to create a view tag.
118
00:05:38.320 --> 00:05:40.960
And this is gonna be our grid.
119
00:05:40.960 --> 00:05:42.630
The first item in the grid,
120
00:05:42.630 --> 00:05:46.150
is going to be our post image picker.
121
00:05:46.150 --> 00:05:49.460
So let's come down and let's actually grab that.
122
00:05:49.460 --> 00:05:52.850
I'm not gonna use the view tag that we have there.
123
00:05:52.850 --> 00:05:55.330
Let's just grab the post image picker.
124
00:05:55.330 --> 00:05:58.870
And that's going to be our first element.
125
00:05:58.870 --> 00:06:02.470
Now, the next thing are gonna be those text inputs.
126
00:06:02.470 --> 00:06:04.430
So let's come here.
127
00:06:04.430 --> 00:06:08.840
And we do not wanna just copy and paste both of these yet,
128
00:06:08.840 --> 00:06:11.920
'cause we wanna wrap these up in a view tag,
129
00:06:11.920 --> 00:06:15.550
because we're gonna have, you can think of this form grid,
130
00:06:15.550 --> 00:06:20.000
we're going to have one element and then a second element.
131
00:06:20.000 --> 00:06:23.380
You don't wanna think about the text inputs separately.
132
00:06:23.380 --> 00:06:26.470
You wanna think of them as being wrapped up in a container.
133
00:06:26.470 --> 00:06:28.380
The left hand side is our icon,
134
00:06:28.380 --> 00:06:30.760
the right hand side are our form elements.
135
00:06:30.760 --> 00:06:32.870
So there's technically only two.
136
00:06:32.870 --> 00:06:33.870
And so because of that,
137
00:06:33.870 --> 00:06:36.100
we need to wrap those up in a view tag.
138
00:06:36.100 --> 00:06:39.550
So I'm gonna now take those text inputs.
139
00:06:39.550 --> 00:06:42.950
And now we can paste them inside of that view.
140
00:06:42.950 --> 00:06:45.207
So I'm gonna hit save now.
141
00:06:45.207 --> 00:06:47.960
And you can see things are starting to move around.
142
00:06:47.960 --> 00:06:51.010
So let's actually go and let's call this style.
143
00:06:51.010 --> 00:06:53.990
So I'm gonna say first our form grid one.
144
00:06:53.990 --> 00:06:57.893
So style equals form grid.
145
00:06:58.860 --> 00:07:02.240
And now, let's go start to add some of those styles.
146
00:07:02.240 --> 00:07:04.980
So the container, we already know we want
147
00:07:04.980 --> 00:07:08.300
the height of that to be 100%.
148
00:07:08.300 --> 00:07:12.060
Now for this form grid, this one is a little bit different.
149
00:07:12.060 --> 00:07:14.250
This one because everything,
150
00:07:14.250 --> 00:07:16.790
remember every component, every style,
151
00:07:16.790 --> 00:07:20.720
everything in React Native uses flexbox,
152
00:07:20.720 --> 00:07:22.770
we need to change this,
153
00:07:22.770 --> 00:07:26.110
because by default it uses flex direction column.
154
00:07:26.110 --> 00:07:27.340
That's the reason why
155
00:07:27.340 --> 00:07:29.760
these elements are sitting on top of each other.
156
00:07:29.760 --> 00:07:32.550
We wanna use flex direction, row.
157
00:07:32.550 --> 00:07:34.190
So let's switch that.
158
00:07:34.190 --> 00:07:38.800
So we're saying flex direction is gonna be row.
159
00:07:38.800 --> 00:07:40.870
I'm gonna hit save, and look at that.
160
00:07:40.870 --> 00:07:41.703
There we go.
161
00:07:41.703 --> 00:07:43.300
We're starting to get a little closer.
162
00:07:43.300 --> 00:07:46.830
For this, I'm also gonna add some margin on the bottom.
163
00:07:46.830 --> 00:07:48.360
Just so we don't have the button,
164
00:07:48.360 --> 00:07:51.030
so close to everything up here.
165
00:07:51.030 --> 00:07:54.130
So here I'll say margin bottom.
166
00:07:54.130 --> 00:07:56.810
And for this, let's just say 20.
167
00:07:56.810 --> 00:07:59.220
And that just gives us a little bit spacing.
168
00:07:59.220 --> 00:08:01.560
Okay, so that's looking good.
169
00:08:01.560 --> 00:08:06.120
Now let's talk about our text input wrapper.
170
00:08:06.120 --> 00:08:09.170
Or you could call it input wrapper, whatever you prefer.
171
00:08:09.170 --> 00:08:11.100
So with our text input wrapper,
172
00:08:11.100 --> 00:08:12.990
this is where we're probably gonna write
173
00:08:12.990 --> 00:08:15.500
the most code that we're gonna have.
174
00:08:15.500 --> 00:08:17.770
So let's go in, let's call it
175
00:08:17.770 --> 00:08:19.670
and then we can start adding the styles
176
00:08:19.670 --> 00:08:22.350
and see them changing on the phone.
177
00:08:22.350 --> 00:08:24.580
So this is gonna be style,
178
00:08:24.580 --> 00:08:28.763
which is gonna be set to text input wrapper.
179
00:08:30.200 --> 00:08:31.650
There we go.
180
00:08:31.650 --> 00:08:34.840
And now let's start adding those styles.
181
00:08:34.840 --> 00:08:36.410
So first and foremost,
182
00:08:36.410 --> 00:08:40.390
oh, and let's also get rid of the style.
183
00:08:40.390 --> 00:08:42.580
That one we had there for the text area.
184
00:08:42.580 --> 00:08:44.170
Let's just get rid of that.
185
00:08:44.170 --> 00:08:47.950
We're gonna be adding our own dedicated ones here shortly.
186
00:08:47.950 --> 00:08:50.090
So for the text input wrapper,
187
00:08:50.090 --> 00:08:53.060
I wanna have a way of really separating these out.
188
00:08:53.060 --> 00:08:55.600
And I think adding some borders are gonna be
189
00:08:55.600 --> 00:08:57.310
the best ways of doing that.
190
00:08:57.310 --> 00:09:00.050
So I'm gonna add a border to the bottom,
191
00:09:00.050 --> 00:09:05.050
and a border to the left of this entire component.
192
00:09:05.140 --> 00:09:09.690
And then we can also really add some padding then.
193
00:09:09.690 --> 00:09:11.260
So let's go,
194
00:09:11.260 --> 00:09:16.260
and let's say we wanna do the border bottom color.
195
00:09:16.670 --> 00:09:20.590
And I believe we already have a color here that I like.
196
00:09:20.590 --> 00:09:23.580
So yeah, let's use this light gray one.
197
00:09:23.580 --> 00:09:26.800
So I'm just gonna start typing light gray.
198
00:09:26.800 --> 00:09:29.650
And that will be auto imported for us.
199
00:09:29.650 --> 00:09:32.400
So we have our text input wrapper.
200
00:09:32.400 --> 00:09:34.410
And you know what?
201
00:09:34.410 --> 00:09:36.010
I just realized.
202
00:09:36.010 --> 00:09:38.090
Let's see, let's test this out really quick.
203
00:09:38.090 --> 00:09:40.000
If I hit save, yeah,
204
00:09:40.000 --> 00:09:44.200
I actually want to apply these styles to the input element.
205
00:09:44.200 --> 00:09:46.633
So let's go and switch that really quick.
206
00:09:47.810 --> 00:09:49.610
The text input wrapper,
207
00:09:49.610 --> 00:09:52.390
all I care about here is just the width.
208
00:09:52.390 --> 00:09:55.300
So do you notice how in our placeholder,
209
00:09:55.300 --> 00:09:56.440
it's getting cut off.
210
00:09:56.440 --> 00:09:59.150
So this component's actually ending right here.
211
00:09:59.150 --> 00:10:01.070
So for the text input wrapper,
212
00:10:01.070 --> 00:10:03.630
all I need to do is add a width,
213
00:10:03.630 --> 00:10:06.820
and that's gonna be 100%.
214
00:10:06.820 --> 00:10:08.070
Okay, hit save.
215
00:10:08.070 --> 00:10:09.810
And now you can see that fixed it.
216
00:10:09.810 --> 00:10:10.930
Okay, perfect.
217
00:10:10.930 --> 00:10:14.560
Now let's go and add our input elements styles.
218
00:10:14.560 --> 00:10:18.490
So for text input and the text area,
219
00:10:18.490 --> 00:10:21.020
it's gonna start with a single style.
220
00:10:21.020 --> 00:10:24.010
And then we'll add our specific ones later on.
221
00:10:24.010 --> 00:10:26.880
So we're gonna start with an input element.
222
00:10:26.880 --> 00:10:29.583
And then same thing for our text area.
223
00:10:30.760 --> 00:10:31.990
Input element.
224
00:10:31.990 --> 00:10:35.200
And now let's go add our borders.
225
00:10:35.200 --> 00:10:38.240
So we're gonna have a border bottom color of light gray.
226
00:10:38.240 --> 00:10:42.310
And the way it works with React Native style sheets,
227
00:10:42.310 --> 00:10:44.270
is whenever you're working with borders,
228
00:10:44.270 --> 00:10:46.700
you need to be more explicit
229
00:10:46.700 --> 00:10:49.080
than say, if you're writing in CSS.
230
00:10:49.080 --> 00:10:53.580
So now we can say border bottom width,
231
00:10:53.580 --> 00:10:55.820
and you can see all of the different options.
232
00:10:55.820 --> 00:10:59.700
You could pick a bottom left radius, a right radius,
233
00:10:59.700 --> 00:11:02.490
start radius, width, anything like that.
234
00:11:02.490 --> 00:11:05.820
So we just wanna do border bottom width.
235
00:11:05.820 --> 00:11:08.170
And for this, I just wanna do one.
236
00:11:08.170 --> 00:11:10.680
And now we're gonna do the same thing,
237
00:11:10.680 --> 00:11:13.750
for the border left.
238
00:11:13.750 --> 00:11:15.700
So I can just copy this.
239
00:11:15.700 --> 00:11:18.823
And so now I'll say border,
240
00:11:19.800 --> 00:11:22.160
left color, and width.
241
00:11:22.160 --> 00:11:24.160
We wanna be at one.
242
00:11:24.160 --> 00:11:25.200
So hit save.
243
00:11:25.200 --> 00:11:28.450
And this is kinda hard to see on the screen,
244
00:11:28.450 --> 00:11:30.900
depending on how much you're zoomed in.
245
00:11:30.900 --> 00:11:33.570
But I am seeing the border there.
246
00:11:33.570 --> 00:11:34.730
And I want it to be light.
247
00:11:34.730 --> 00:11:38.410
If you go and you look at the way Instagram's is structured,
248
00:11:38.410 --> 00:11:40.520
theirs is very light.
249
00:11:40.520 --> 00:11:42.370
And so that's what I'm wanting to go with.
250
00:11:42.370 --> 00:11:45.870
But you can definitely change it to whatever you want.
251
00:11:45.870 --> 00:11:50.870
Now, also, let's go and let's add in some padding.
252
00:11:51.370 --> 00:11:52.360
Because you can see,
253
00:11:52.360 --> 00:11:55.670
all of that content is really tight together.
254
00:11:55.670 --> 00:11:57.710
And that's not really what I'm wanting.
255
00:11:57.710 --> 00:11:59.970
So let's add some padding.
256
00:11:59.970 --> 00:12:02.510
Let's just say three, hit save.
257
00:12:02.510 --> 00:12:05.480
And that gives us just a little bit more space.
258
00:12:05.480 --> 00:12:06.740
So that's looking good.
259
00:12:06.740 --> 00:12:10.240
Now let's go to our text area element here.
260
00:12:10.240 --> 00:12:12.080
For the text area element,
261
00:12:12.080 --> 00:12:14.610
all we're gonna change is the height.
262
00:12:14.610 --> 00:12:18.110
Now I played around with quite a few sizes,
263
00:12:18.110 --> 00:12:21.990
and the one that came out was actually 70.
264
00:12:21.990 --> 00:12:23.830
You know what, it was actually 76.
265
00:12:23.830 --> 00:12:25.070
Yeah, 76.
266
00:12:25.070 --> 00:12:26.940
So let's go add this one.
267
00:12:26.940 --> 00:12:28.370
I'm gonna hit save.
268
00:12:28.370 --> 00:12:30.800
And now we need to make sure
269
00:12:30.800 --> 00:12:33.090
that we're passing this in as an array.
270
00:12:33.090 --> 00:12:38.010
So text input element, comma, text area element.
271
00:12:38.010 --> 00:12:39.360
Now hit save.
272
00:12:39.360 --> 00:12:42.960
And as you can see if you can see it,
273
00:12:42.960 --> 00:12:44.350
this is much larger.
274
00:12:44.350 --> 00:12:46.430
This is exactly what we're going for though.
275
00:12:46.430 --> 00:12:50.010
So now it's very clear that the name is for one line,
276
00:12:50.010 --> 00:12:54.460
and the content is multi lined, just like this.
277
00:12:54.460 --> 00:12:55.780
And then as you're typing,
278
00:12:55.780 --> 00:12:57.290
you can see that you can go down
279
00:12:57.290 --> 00:12:59.990
and type as much content as you want.
280
00:12:59.990 --> 00:13:02.210
So that's looking really good.
281
00:13:02.210 --> 00:13:05.510
I like how all of this is coming along.
282
00:13:05.510 --> 00:13:09.910
Now let's add our bottom button wrapper.
283
00:13:09.910 --> 00:13:12.140
So down on the button itself,
284
00:13:12.140 --> 00:13:13.040
what we can do is
285
00:13:13.040 --> 00:13:16.770
we can actually wrap this entire conditional here.
286
00:13:16.770 --> 00:13:18.803
We can just wrap this up in a view tag.
287
00:13:19.770 --> 00:13:22.430
So I'm gonna add a view tag here.
288
00:13:22.430 --> 00:13:25.860
And the style is gonna be set to,
289
00:13:25.860 --> 00:13:28.000
I believe, it was a button wrapper.
290
00:13:28.000 --> 00:13:28.833
There we go.
291
00:13:29.680 --> 00:13:33.170
And now let's go back to the post form styles
292
00:13:33.170 --> 00:13:36.610
and we'll add some padding.
293
00:13:36.610 --> 00:13:38.720
Right of 15
294
00:13:38.720 --> 00:13:42.630
and padding left of 15.
295
00:13:42.630 --> 00:13:43.560
There you go.
296
00:13:43.560 --> 00:13:44.830
That's looking really good.
297
00:13:44.830 --> 00:13:46.320
Let's test this out.
298
00:13:46.320 --> 00:13:48.840
Okay, some or whatever.
299
00:13:48.840 --> 00:13:51.940
Some name and some content.
300
00:13:51.940 --> 00:13:54.083
Let's add an image.
301
00:13:56.320 --> 00:13:59.870
And now you can see that is looking sharp.
302
00:13:59.870 --> 00:14:03.500
I really am a fan of the way that that's structured.
303
00:14:03.500 --> 00:14:05.380
So let's test it out with another one,
304
00:14:05.380 --> 00:14:07.600
make sure everything's still working.
305
00:14:07.600 --> 00:14:08.433
Awesome!
306
00:14:08.433 --> 00:14:09.860
Now click submit.
307
00:14:09.860 --> 00:14:11.260
It's been submitted.
308
00:14:11.260 --> 00:14:14.540
And now we're taken to the post detail screen.
309
00:14:14.540 --> 00:14:15.700
So this is perfect.
310
00:14:15.700 --> 00:14:18.770
We have a really nice,
311
00:14:18.770 --> 00:14:21.510
functional looking form.
312
00:14:21.510 --> 00:14:23.020
So I'm happy with that.
313
00:14:23.020 --> 00:14:25.910
And now I wanna show you what we're gonna...
314
00:14:25.910 --> 00:14:27.970
Give you a preview of what we're gonna work on,
315
00:14:27.970 --> 00:14:29.260
over the next few guides.
316
00:14:29.260 --> 00:14:31.800
Because we're about to get into
317
00:14:31.800 --> 00:14:34.960
what's really probably one of the most challenging
318
00:14:34.960 --> 00:14:37.760
and most advanced parts of this entire course.
319
00:14:37.760 --> 00:14:40.190
So watch what happens now if I go back
320
00:14:40.190 --> 00:14:42.660
and I hit the plus icon.
321
00:14:42.660 --> 00:14:45.540
Well, it's showing us our form again,
322
00:14:45.540 --> 00:14:47.550
with all of the data.
323
00:14:47.550 --> 00:14:48.383
That's not good.
324
00:14:48.383 --> 00:14:51.110
That's definitely not what you'd expect in a form.
325
00:14:51.110 --> 00:14:53.500
So what we're gonna do is,
326
00:14:53.500 --> 00:14:57.040
we're gonna create a base state for the form,
327
00:14:57.040 --> 00:15:02.040
where we say after the submission has occurred successfully,
328
00:15:02.500 --> 00:15:04.530
then we're gonna clear the data out.
329
00:15:04.530 --> 00:15:07.170
Now that sounds pretty easy.
330
00:15:07.170 --> 00:15:08.570
And part of it is.
331
00:15:08.570 --> 00:15:09.560
In the next guide,
332
00:15:09.560 --> 00:15:13.220
we're simply going to update this form element here,
333
00:15:13.220 --> 00:15:17.130
so that it clears out the name and the content.
334
00:15:17.130 --> 00:15:18.610
But as you're gonna see,
335
00:15:18.610 --> 00:15:22.660
it's not quite that easy to clear out the image.
336
00:15:22.660 --> 00:15:26.380
And so that's gonna start to take us on a journey
337
00:15:26.380 --> 00:15:30.090
where we're gonna learn about how to use references
338
00:15:30.090 --> 00:15:32.150
and how we're able to,
339
00:15:32.150 --> 00:15:35.310
from a parent element and a parent component,
340
00:15:35.310 --> 00:15:37.700
reach in to a child component,
341
00:15:37.700 --> 00:15:39.760
and then call functions.
342
00:15:39.760 --> 00:15:42.600
That's gonna be something that will help you out a ton.
343
00:15:42.600 --> 00:15:45.300
I wanted to make sure that we covered that in this course.
344
00:15:45.300 --> 00:15:47.020
Because this is something
345
00:15:47.020 --> 00:15:49.200
that you're gonna have to do quite a bit.
346
00:15:49.200 --> 00:15:50.570
And if you've never done it before,
347
00:15:50.570 --> 00:15:52.110
if you've never been taught it,
348
00:15:52.110 --> 00:15:53.730
it can look kinda confusing.
349
00:15:53.730 --> 00:15:55.360
So over the next few guides,
350
00:15:55.360 --> 00:15:56.660
that's what we're gonna do.
351
00:15:56.660 --> 00:15:59.770
And then this entire post form is gonna be complete