- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.480 --> 00:00:01.900
At the end of the last guide,
2
00:00:01.900 --> 00:00:06.330
I showed you that there was a bug with our application
3
00:00:06.330 --> 00:00:09.120
and I kind of walk you through at a high level
4
00:00:09.120 --> 00:00:11.420
what we're going to do in order to correct that.
5
00:00:11.420 --> 00:00:13.520
So, this is going to be a pretty short video
6
00:00:13.520 --> 00:00:18.010
because I have a few things that I want you to look into
7
00:00:18.010 --> 00:00:21.280
and to research afterwards before we move on
8
00:00:21.280 --> 00:00:24.520
to the more advanced content in the next guide.
9
00:00:24.520 --> 00:00:27.010
So, for this guide, what I want to do
10
00:00:27.010 --> 00:00:32.010
is I simply want to remove the name and the content
11
00:00:32.980 --> 00:00:37.120
and then the post image whenever we hit submit.
12
00:00:37.120 --> 00:00:39.960
Now, you're going to see that we will be able to close out
13
00:00:39.960 --> 00:00:42.610
and clear out the post image data
14
00:00:42.610 --> 00:00:45.280
but that doesn't actually have anything to do
15
00:00:45.280 --> 00:00:47.330
with our post image picker.
16
00:00:47.330 --> 00:00:51.490
All we're going to doing is clearing out the post image
17
00:00:51.490 --> 00:00:54.090
so that it wouldn't be sent up to the API
18
00:00:54.090 --> 00:00:56.300
but that would really be confusing to users
19
00:00:56.300 --> 00:01:00.400
so we're simply going to worry about clearing out the data
20
00:01:00.400 --> 00:01:03.110
that the form has control over.
21
00:01:03.110 --> 00:01:05.930
So, in the post form screen here
22
00:01:05.930 --> 00:01:09.189
you can see that we have four elements,
23
00:01:09.189 --> 00:01:14.189
four data points or four pieces of state in our post form.
24
00:01:14.230 --> 00:01:16.330
So what I'm going to do is I'm going to come down here
25
00:01:16.330 --> 00:01:19.010
and I'm going to create a new function here
26
00:01:19.010 --> 00:01:21.500
called set base state.
27
00:01:21.500 --> 00:01:26.200
So, set, base, state and it's going to a function,
28
00:01:26.200 --> 00:01:28.380
it's not going to take in any arguments
29
00:01:28.380 --> 00:01:32.520
and this is going to be called whenever we want to clear out
30
00:01:32.520 --> 00:01:35.540
any of the data that the post form has.
31
00:01:35.540 --> 00:01:38.270
So, the very first thing is going to the name.
32
00:01:38.270 --> 00:01:41.490
So, I'm going to say set name to the empty string.
33
00:01:41.490 --> 00:01:44.100
Then I'm going to say set the content
34
00:01:44.100 --> 00:01:46.180
also to the empty string.
35
00:01:46.180 --> 00:01:50.160
Then, set post image to just null
36
00:01:51.310 --> 00:01:56.310
and then, set is submitting to false.
37
00:01:56.990 --> 00:02:00.000
Now we're already doing set is submitting to false
38
00:02:00.000 --> 00:02:02.340
down below but I'm going to put it here
39
00:02:02.340 --> 00:02:05.950
just so we can have one spot of our application
40
00:02:05.950 --> 00:02:08.980
where that base state is being managed.
41
00:02:08.980 --> 00:02:11.890
So, I'm going to copy this function name.
42
00:02:11.890 --> 00:02:14.710
And, let's come down to handle submit.
43
00:02:14.710 --> 00:02:17.130
Now I only want this to trigger
44
00:02:17.130 --> 00:02:21.010
if the post has been created successfully.
45
00:02:21.010 --> 00:02:23.400
It'd be a really bad user experience
46
00:02:23.400 --> 00:02:25.960
if we were to clear out all of the form data
47
00:02:25.960 --> 00:02:28.320
if there was an error on the server.
48
00:02:28.320 --> 00:02:31.880
So, instead what I'd like to do is to come here and say,
49
00:02:31.880 --> 00:02:36.700
if the response data includes the memipedia post
50
00:02:36.700 --> 00:02:40.840
then I want to call our set base state function
51
00:02:40.840 --> 00:02:44.800
and then it's fine for set is submitting false.
52
00:02:44.800 --> 00:02:46.780
It's fine for it to be called twice.
53
00:02:46.780 --> 00:02:50.240
If you want you also because this is always going to
54
00:02:50.240 --> 00:02:52.030
be called if it's successful,
55
00:02:52.030 --> 00:02:53.369
you could move this down
56
00:02:53.369 --> 00:02:56.870
and put it in the alert if you'd like.
57
00:02:56.870 --> 00:02:58.890
Just so it's not called multiple times.
58
00:02:58.890 --> 00:03:01.340
I'll delete our console log statement
59
00:03:01.340 --> 00:03:04.660
and let's hit save and see if this is working.
60
00:03:04.660 --> 00:03:08.800
So, I'm going to do testing base state
61
00:03:08.800 --> 00:03:11.050
and then add some content.
62
00:03:11.050 --> 00:03:13.763
We'll go and we'll select an image.
63
00:03:16.390 --> 00:03:18.720
Hit choose, hit submit
64
00:03:18.720 --> 00:03:20.600
and this is going to redirect us.
65
00:03:20.600 --> 00:03:22.540
Everything so far, so good.
66
00:03:22.540 --> 00:03:24.840
And now if I click on the plus icon,
67
00:03:24.840 --> 00:03:28.280
you can see that our name and our content
68
00:03:28.280 --> 00:03:29.330
has been cleared out.
69
00:03:29.330 --> 00:03:33.840
So, that's perfect but we still have this image here.
70
00:03:33.840 --> 00:03:36.800
And the other issue, if you think about it,
71
00:03:36.800 --> 00:03:41.270
we actually have a very confusing piece of state right here
72
00:03:41.270 --> 00:03:44.920
where it kind of looks like we have a post image
73
00:03:44.920 --> 00:03:49.420
but this is only stored in our post image picker
74
00:03:49.420 --> 00:03:50.870
so that is not good.
75
00:03:50.870 --> 00:03:55.670
What we need is the ability for our post form screen
76
00:03:55.670 --> 00:04:00.070
to reach into our post image picker and say,
77
00:04:00.070 --> 00:04:04.080
hey, when this process occurs, when we set base state here,
78
00:04:04.080 --> 00:04:08.120
we need you to clear out your image.
79
00:04:08.120 --> 00:04:10.050
So, how can we do that?
80
00:04:10.050 --> 00:04:13.260
Well, I am going to show you some things I want you to
81
00:04:13.260 --> 00:04:16.840
look into before going on to the next guide.
82
00:04:16.840 --> 00:04:18.340
And this is very important
83
00:04:18.340 --> 00:04:20.810
because what we're going to do in the next guide
84
00:04:20.810 --> 00:04:24.520
is going to be very confusing if you don't have
85
00:04:24.520 --> 00:04:28.010
some type of reference point for what's occurring.
86
00:04:28.010 --> 00:04:30.200
So, there are three articles
87
00:04:30.200 --> 00:04:33.210
and it's in the documentation I want you to take a look at.
88
00:04:33.210 --> 00:04:36.010
The first one is use ref.
89
00:04:36.010 --> 00:04:40.138
The second one is what is called a forwarding ref
90
00:04:40.138 --> 00:04:45.138
and then the last one is use imperative handle.
91
00:04:45.240 --> 00:04:47.780
We're going to use each one
92
00:04:47.780 --> 00:04:51.470
of these react elements in the next guide.
93
00:04:51.470 --> 00:04:53.390
To give you a high level,
94
00:04:53.390 --> 00:04:58.390
what we're doing is a ref gives us the ability
95
00:04:58.420 --> 00:05:03.420
to essentially tag and to grab hold of a child component
96
00:05:04.340 --> 00:05:08.090
and to be able to reach in and call functions.
97
00:05:08.090 --> 00:05:11.830
So, at a very high level that's what a ref does.
98
00:05:11.830 --> 00:05:14.610
Now, you'll also see things like warnings
99
00:05:14.610 --> 00:05:18.760
where it says, if you come here for use imperative handle,
100
00:05:18.760 --> 00:05:22.630
it says, you can use this to customize the instance value
101
00:05:22.630 --> 00:05:25.950
that is exposed to parent components when using ref.
102
00:05:25.950 --> 00:05:28.900
As always imperative code using refs
103
00:05:28.900 --> 00:05:31.180
should be avoided in most cases.
104
00:05:31.180 --> 00:05:33.530
It's part of the reason why we've not used
105
00:05:33.530 --> 00:05:36.500
anything like this up until this point.
106
00:05:36.500 --> 00:05:40.300
The case that we're using is exactly what
107
00:05:40.300 --> 00:05:42.350
they created this function for.
108
00:05:42.350 --> 00:05:45.810
They give the warning but if it wasn't important
109
00:05:45.810 --> 00:05:47.970
they wouldn't of included it in the library.
110
00:05:47.970 --> 00:05:51.110
So, the reason why we need to use this
111
00:05:51.110 --> 00:05:54.670
is because there's no other way for us to access
112
00:05:54.670 --> 00:05:59.135
and to run those functions inside of our post image picker.
113
00:05:59.135 --> 00:06:02.300
A few other options that we could use
114
00:06:02.300 --> 00:06:04.450
just to give you a high level view
115
00:06:04.450 --> 00:06:07.270
of some of the other options that are out there is
116
00:06:07.270 --> 00:06:11.320
we could have wrapped up our entire post form
117
00:06:11.320 --> 00:06:16.000
in say a post form context and a provider
118
00:06:16.000 --> 00:06:19.040
and then whenever an image gets uploaded
119
00:06:19.040 --> 00:06:20.680
by the post image picker,
120
00:06:20.680 --> 00:06:22.650
instead of using it's local state,
121
00:06:22.650 --> 00:06:26.180
we could have changed the state of that provider
122
00:06:26.180 --> 00:06:28.830
and that's using the context API.
123
00:06:28.830 --> 00:06:30.730
I personally think that's a little bit
124
00:06:30.730 --> 00:06:32.370
overkill for what we're doing.
125
00:06:32.370 --> 00:06:34.380
We're only talking really about
126
00:06:34.380 --> 00:06:36.910
three or four pieces of state
127
00:06:36.910 --> 00:06:39.670
and I think that this is a really good use case
128
00:06:39.670 --> 00:06:41.780
for being able to work with that
129
00:06:41.780 --> 00:06:43.870
and then even more importantly,
130
00:06:43.870 --> 00:06:46.860
for this course, this is an advanced course,
131
00:06:46.860 --> 00:06:50.560
I wanted you to be able to learn how refs work.
132
00:06:50.560 --> 00:06:53.550
Especially how refs work with hooks.
133
00:06:53.550 --> 00:06:56.220
So, please go over all three of these.
134
00:06:56.220 --> 00:06:59.260
I'll include them in the show notes.
135
00:06:59.260 --> 00:07:00.910
And then in the next guide,
136
00:07:00.910 --> 00:07:04.770
we are going to walk through a real world implementation
137
00:07:04.770 --> 00:07:07.620
where we use each on of these three tools
138
00:07:07.620 --> 00:07:11.763
to be able to clear out our child component state.