- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.670 --> 00:00:03.910
Now that we're successfully calling data from the API
2
00:00:03.910 --> 00:00:07.920
and loading at it up into our application,
3
00:00:07.920 --> 00:00:10.830
now we can see how we can actually take that data
4
00:00:10.830 --> 00:00:13.010
and render it onto the screen.
5
00:00:13.010 --> 00:00:14.800
So the very first thing we're gonna do
6
00:00:14.800 --> 00:00:19.330
is we need the ability to store some data in the component,
7
00:00:19.330 --> 00:00:21.440
and you may have already guessed the way we're gonna do
8
00:00:21.440 --> 00:00:26.040
that is with some state we're gonna use the useState hook
9
00:00:26.040 --> 00:00:27.430
in order to do that.
10
00:00:27.430 --> 00:00:30.483
So the very top here, right after useEffect,
11
00:00:30.483 --> 00:00:33.480
I'm gonna add a comma and say useState
12
00:00:33.480 --> 00:00:37.370
because we wanna be able to use and create some state here.
13
00:00:37.370 --> 00:00:39.220
Now in the component itself,
14
00:00:39.220 --> 00:00:42.000
I'm gonna now create a state call,
15
00:00:42.000 --> 00:00:45.450
so I'm gonna say const, and then in brackets I'm gonna call
16
00:00:45.450 --> 00:00:49.500
this just portfolio item and then create the setter,
17
00:00:49.500 --> 00:00:54.500
so set portfolioItem just like this,
18
00:00:55.230 --> 00:00:58.510
and then from there we're gonna call useState
19
00:00:58.510 --> 00:01:01.870
and we're gonna set the default as null,
20
00:01:01.870 --> 00:01:03.480
and I'm gonna show you why I'm gonna do
21
00:01:03.480 --> 00:01:05.690
that here in a moment
22
00:01:05.690 --> 00:01:09.220
but for right now, I'm simply going to create that piece
23
00:01:09.220 --> 00:01:11.090
of state, create the setter
24
00:01:11.090 --> 00:01:14.850
and use the state to start at null, that's the first thing.
25
00:01:14.850 --> 00:01:19.630
Now inside of this API, then statement,
26
00:01:19.630 --> 00:01:21.960
this is where we want to get the data
27
00:01:21.960 --> 00:01:24.540
and then store it in that local state.
28
00:01:24.540 --> 00:01:27.080
And so the way we can do that is
29
00:01:27.080 --> 00:01:30.700
by adding set portfolioItem,
30
00:01:30.700 --> 00:01:35.700
and then the data is gonna be response.data.portfolio_item
31
00:01:38.400 --> 00:01:41.850
and if you're curious on how I knew the naming for this,
32
00:01:41.850 --> 00:01:43.760
we actually console log this out,
33
00:01:43.760 --> 00:01:45.410
if you remember back in the last guide,
34
00:01:45.410 --> 00:01:47.980
when we printed out response.data,
35
00:01:47.980 --> 00:01:52.270
we received an object called portfolio_item
36
00:01:52.270 --> 00:01:56.570
and so that is what we're storing inside of our state,
37
00:01:56.570 --> 00:02:00.220
so that is all that we need to do there.
38
00:02:00.220 --> 00:02:03.960
Now, before we start rendering out any of this data,
39
00:02:03.960 --> 00:02:06.680
I wanna add a loading state because the way
40
00:02:06.680 --> 00:02:09.910
this is gonna work is we're gonna go to the page,
41
00:02:09.910 --> 00:02:12.880
we're going to grab the id
42
00:02:12.880 --> 00:02:15.280
and then we're triggering the ability
43
00:02:15.280 --> 00:02:18.530
to get the portfolioItem from the API,
44
00:02:18.530 --> 00:02:21.830
but that could take a few moments to a few seconds.
45
00:02:21.830 --> 00:02:23.280
and so because of that,
46
00:02:23.280 --> 00:02:26.610
we don't wanna simply have a completely empty page
47
00:02:26.610 --> 00:02:27.550
for the user,
48
00:02:27.550 --> 00:02:30.860
instead what I'd like to have is to let the user know
49
00:02:30.860 --> 00:02:32.700
that we are loading the page,
50
00:02:32.700 --> 00:02:36.670
so right after that get portfolioItem function,
51
00:02:36.670 --> 00:02:40.260
I'm gonna say if, and then let's just put
52
00:02:40.260 --> 00:02:45.260
on here a bang an exclamation mark and say portfolioItem,
53
00:02:47.280 --> 00:02:51.510
and then we'll just say return div
54
00:02:51.510 --> 00:02:54.803
and then we'll just say loading, something like that,
55
00:02:55.660 --> 00:02:59.700
and we can actually wrap up this loading tag inside
56
00:02:59.700 --> 00:03:02.370
of our dashboard layout but I'm actually gonna save
57
00:03:02.370 --> 00:03:03.520
that for later
58
00:03:03.520 --> 00:03:06.570
because what I'm gonna show you in the next few guides
59
00:03:06.570 --> 00:03:07.403
is I'm gonna show you
60
00:03:07.403 --> 00:03:11.270
how we can actually create a loader component
61
00:03:11.270 --> 00:03:14.380
and there'll be a little spinning animated icon.
62
00:03:14.380 --> 00:03:16.680
So for right now, we're not gonna worry about the look
63
00:03:16.680 --> 00:03:18.920
and feel of this loader
64
00:03:18.920 --> 00:03:21.070
because we are gonna be replacing this soon,
65
00:03:21.070 --> 00:03:23.820
and I'm also gonna show you how you can actually place
66
00:03:23.820 --> 00:03:26.930
this directly inside of the dashboard layout.
67
00:03:26.930 --> 00:03:29.430
So for right now what's gonna happen is
68
00:03:29.430 --> 00:03:31.500
while we're retrieving the data,
69
00:03:31.500 --> 00:03:35.230
it's gonna simply be showing this little loading screen
70
00:03:35.230 --> 00:03:37.700
so we can hit save here and we can test this out
71
00:03:37.700 --> 00:03:39.710
to see if this is working.
72
00:03:39.710 --> 00:03:42.130
So I'm gonna switch back to Google Chrome
73
00:03:42.130 --> 00:03:45.830
and let's start on the homepage here,
74
00:03:45.830 --> 00:03:48.570
and then I'll click on one of these
75
00:03:48.570 --> 00:03:51.000
and you can see up top it was just for a split second,
76
00:03:51.000 --> 00:03:52.530
but it did say loading,
77
00:03:52.530 --> 00:03:55.080
So that is how that works,
78
00:03:55.080 --> 00:03:57.760
if you're curious on this syntax right here,
79
00:03:57.760 --> 00:04:02.760
this is the reason why I started with the value of null,
80
00:04:02.950 --> 00:04:05.360
'cause what this is saying is in
81
00:04:05.360 --> 00:04:10.360
this condition we're saying if there is no portfolioItem,
82
00:04:10.500 --> 00:04:13.590
that is the syntax when you put a little bang
83
00:04:13.590 --> 00:04:15.250
there and a little exclamation mark,
84
00:04:15.250 --> 00:04:18.580
that's the exact same thing as saying something like this,
85
00:04:18.580 --> 00:04:23.580
if portfolio item is equal to null
86
00:04:24.220 --> 00:04:27.790
or it's equal to undefined or something like that,
87
00:04:27.790 --> 00:04:30.710
the reason why I like doing the little bang here
88
00:04:30.710 --> 00:04:31.860
at the beginning is
89
00:04:31.860 --> 00:04:34.650
because it actually checks against null,
90
00:04:34.650 --> 00:04:36.038
it checks against undefined
91
00:04:36.038 --> 00:04:38.310
and it checks against those values,
92
00:04:38.310 --> 00:04:41.820
it's simply saying if there is a no object here,
93
00:04:41.820 --> 00:04:44.460
so if we've not filled in that data,
94
00:04:44.460 --> 00:04:47.560
then we wanna return this little loading
95
00:04:47.560 --> 00:04:48.950
or eventually loading icon
96
00:04:48.950 --> 00:04:50.880
for right now just this loading text.
97
00:04:50.880 --> 00:04:53.000
So that is working nicely,
98
00:04:53.000 --> 00:04:55.730
Now let's actually see the kind of data
99
00:04:55.730 --> 00:04:57.830
that we have access to once again,
100
00:04:57.830 --> 00:05:00.990
I'm gonna open up the console here
101
00:05:00.990 --> 00:05:04.810
and we should have access inside of the page,
102
00:05:04.810 --> 00:05:09.030
so if I scroll up you can see at my portfolio item here,
103
00:05:09.030 --> 00:05:11.710
and so this is what is stored in state
104
00:05:11.710 --> 00:05:15.130
I'm just gonna copy each one of these keys,
105
00:05:15.130 --> 00:05:17.860
and then that's gonna let me know exactly
106
00:05:17.860 --> 00:05:20.260
what data we wanna pull out,
107
00:05:20.260 --> 00:05:23.550
So I'm just gonna paste this down here for right now,
108
00:05:23.550 --> 00:05:26.730
and then let me make it a comment just
109
00:05:26.730 --> 00:05:29.050
so it doesn't throw a lot of errors.
110
00:05:29.050 --> 00:05:32.097
So here we go, we have a banner_image_url,
111
00:05:32.097 --> 00:05:34.270
w have a category, we have these column names,
112
00:05:34.270 --> 00:05:36.060
which is just some metadata,
113
00:05:36.060 --> 00:05:41.060
we have a description, id, logo_url, a name, a position,
114
00:05:41.150 --> 00:05:44.960
a thumb_image, and then a regular url.
115
00:05:44.960 --> 00:05:47.310
So the data that we are gonna want here,
116
00:05:47.310 --> 00:05:49.550
we just wanna subset of this data
117
00:05:49.550 --> 00:05:54.200
so we can use the way we can actually de-structure this,
118
00:05:54.200 --> 00:05:56.670
so we're going to say const,
119
00:05:56.670 --> 00:05:58.380
and then in curly brackets,
120
00:05:58.380 --> 00:06:02.320
we're gonna list out the key names here that we want.
121
00:06:02.320 --> 00:06:06.245
So I do want the banner_image_url 'cause I'm gonna make
122
00:06:06.245 --> 00:06:07.640
that into the background.
123
00:06:07.640 --> 00:06:10.430
Then I want the description
124
00:06:10.430 --> 00:06:14.887
and then I want the logo_url and then the name
125
00:06:17.295 --> 00:06:18.810
and then the url.
126
00:06:18.810 --> 00:06:20.780
So as you can see I just kind of picked
127
00:06:20.780 --> 00:06:24.300
and choose the data items that I wanted here,
128
00:06:24.300 --> 00:06:27.510
and so now that I know those names I can actually delete
129
00:06:27.510 --> 00:06:31.310
this comment, and I'm gonna say that's all gonna get pulled
130
00:06:31.310 --> 00:06:35.160
from the portfolioItem piece of state,
131
00:06:35.160 --> 00:06:38.460
so I know that can be look a little bit weird,
132
00:06:38.460 --> 00:06:40.750
if you haven't done a lot of de-structuring
133
00:06:40.750 --> 00:06:44.340
and that's the main reason why I wanted to do it was
134
00:06:44.340 --> 00:06:47.730
because I wanted you to get practice in seeing the syntax,
135
00:06:47.730 --> 00:06:50.210
'cause you're gonna see this in a lot of tutorials,
136
00:06:50.210 --> 00:06:53.810
a lot of documentation and if you do not write a lot
137
00:06:53.810 --> 00:06:55.140
of de-structuring structuring code,
138
00:06:55.140 --> 00:06:59.060
it can look very weird and so I'd much rather you be able
139
00:06:59.060 --> 00:07:02.010
to see it here and have practice writing that.
140
00:07:02.010 --> 00:07:04.720
Technically, this is the exact same thing
141
00:07:04.720 --> 00:07:07.054
as us saying something like this inside
142
00:07:07.054 --> 00:07:10.180
of h1 tag it's the same thing
143
00:07:10.180 --> 00:07:15.180
as me saying portfolioItem.name something like that,
144
00:07:16.200 --> 00:07:18.190
when you're working with JavaScript objects,
145
00:07:18.190 --> 00:07:20.480
you have the ability when you use this syntax
146
00:07:20.480 --> 00:07:22.590
when you say const and then you use
147
00:07:22.590 --> 00:07:25.080
these curly brackets you have the ability to go into
148
00:07:25.080 --> 00:07:28.950
that object and then pick out the items in the object
149
00:07:28.950 --> 00:07:30.300
that you want to use,
150
00:07:30.300 --> 00:07:32.110
so that's all we're doing there.
151
00:07:32.110 --> 00:07:34.900
Okay, so now that we have those let's actually just print
152
00:07:34.900 --> 00:07:38.400
these out let's make sure that we have access to this data,
153
00:07:38.400 --> 00:07:42.300
so in this h1 tag, let's see if we have access
154
00:07:42.300 --> 00:07:47.300
to the name and then I'm just gonna copy these h1 tags,
155
00:07:47.370 --> 00:07:49.460
and so first one's gonna be
156
00:07:49.460 --> 00:07:54.460
that banner_image_url right after name, then description,
157
00:07:54.970 --> 00:07:59.870
then the logo_url, and then just the standard url,
158
00:07:59.870 --> 00:08:02.650
so obviously right now not caring about styles,
159
00:08:02.650 --> 00:08:05.290
I'm simply trying to make sure that each one
160
00:08:05.290 --> 00:08:07.040
of these data points that we have access
161
00:08:07.040 --> 00:08:09.910
to here is actually coming through
162
00:08:09.910 --> 00:08:11.810
because there've been plenty of times
163
00:08:11.810 --> 00:08:13.340
where I kind of skip this step,
164
00:08:13.340 --> 00:08:16.730
and I assumed that I had access to all
165
00:08:16.730 --> 00:08:19.640
of the data points and then it turned out that I didn't,
166
00:08:19.640 --> 00:08:22.330
and then it created some confusion later on,
167
00:08:22.330 --> 00:08:25.070
so it's good to take these nice little steps
168
00:08:25.070 --> 00:08:27.440
to always make sure that you have access
169
00:08:27.440 --> 00:08:29.000
to the data that you think you do.
170
00:08:29.000 --> 00:08:32.440
So let's check this out and it looks like all this is right.
171
00:08:32.440 --> 00:08:35.920
We have our name, we have our banner image,
172
00:08:35.920 --> 00:08:39.430
we have a description, we have our logo image url,
173
00:08:39.430 --> 00:08:42.280
and then we have the actual url,
174
00:08:42.280 --> 00:08:44.950
so this is good, this means we actually have all
175
00:08:44.950 --> 00:08:47.150
of our data points so that's good.
176
00:08:47.150 --> 00:08:49.710
Now let's kind of talk about the structure
177
00:08:49.710 --> 00:08:50.850
that we want here.
178
00:08:50.850 --> 00:08:55.300
So I know first and foremost that I'm gonna wanna wrap all
179
00:08:55.300 --> 00:08:57.850
of this into a div.
180
00:08:57.850 --> 00:09:02.560
so I want to have some kind of wrapper container type div
181
00:09:02.560 --> 00:09:04.380
for all of this content,
182
00:09:04.380 --> 00:09:07.110
and I'm gonna give this a class name
183
00:09:07.110 --> 00:09:11.630
of portfolio-detail-wrapper,
184
00:09:11.630 --> 00:09:15.380
this is just gonna be a class name that wraps up all
185
00:09:15.380 --> 00:09:17.320
of the data that we have there.
186
00:09:17.320 --> 00:09:21.950
And then from there, I'm gonna wanna have a banner
187
00:09:21.950 --> 00:09:23.230
at the top, that's the reason
188
00:09:23.230 --> 00:09:25.920
why we have this banner_image_url,
189
00:09:25.920 --> 00:09:27.620
Though what I'm kind of foreseen
190
00:09:27.620 --> 00:09:32.620
with this is a background image that goes all the way
191
00:09:32.620 --> 00:09:36.560
from side to side and then a logo right in the center,
192
00:09:36.560 --> 00:09:37.393
we're not gonna worry
193
00:09:37.393 --> 00:09:39.300
about implementing the styles right now,
194
00:09:39.300 --> 00:09:41.540
but at this moment I'm simply wanting
195
00:09:41.540 --> 00:09:44.070
to build out our JSX structure.
196
00:09:44.070 --> 00:09:47.410
So we have this portfolio-detail-wrapper,
197
00:09:47.410 --> 00:09:50.320
now let's add in that banner,
198
00:09:50.320 --> 00:09:53.890
so for that I'm gonna create another div here
199
00:09:53.890 --> 00:09:55.870
and then inside of the div,
200
00:09:55.870 --> 00:09:57.960
I'm gonna put an image tag
201
00:09:57.960 --> 00:10:00.580
so this image tag is gonna take
202
00:10:00.580 --> 00:10:04.810
in the actual banner_image_url, right,
203
00:10:04.810 --> 00:10:07.193
I'm sorry, the logo_url, so logo_url
204
00:10:09.200 --> 00:10:12.450
and then I'm not gonna worry about naming the styles
205
00:10:12.450 --> 00:10:16.060
or anything like that so here we no longer need to use
206
00:10:16.060 --> 00:10:20.370
that logo_url we're using inside of an image tag now,
207
00:10:20.370 --> 00:10:22.970
and these logos are white so if I hit save here
208
00:10:22.970 --> 00:10:26.930
and come back, then you're gonna see kind of an empty space
209
00:10:26.930 --> 00:10:29.750
and right here if I hit select all you can see
210
00:10:29.750 --> 00:10:32.360
there is an image there but because it's white,
211
00:10:32.360 --> 00:10:34.830
you're not gonna be able to actually see it yet.
212
00:10:34.830 --> 00:10:38.340
This is gonna sit on top of the banner.
213
00:10:38.340 --> 00:10:42.070
So we have that logo now we're gonna have some content,
214
00:10:42.070 --> 00:10:45.500
so we're going to let's use that description.
215
00:10:45.500 --> 00:10:48.250
So I'm gonna get another div here
216
00:10:48.250 --> 00:10:51.210
and that's where I'm gonna be putting the description,
217
00:10:51.210 --> 00:10:52.740
We don't need the h1 anymore,
218
00:10:52.740 --> 00:10:56.490
'cause we're gonna be styling this with our own Sass code,
219
00:10:56.490 --> 00:10:59.930
and then inside of here, let's give this a class name,
220
00:10:59.930 --> 00:11:04.870
so say class name and we'll call this portfolio-item
221
00:11:04.870 --> 00:11:07.690
or detail there we go
222
00:11:07.690 --> 00:11:11.410
and we'll just say description just something like that.
223
00:11:11.410 --> 00:11:15.540
Then we'll know how we can style that description value,
224
00:11:15.540 --> 00:11:18.310
and then we don't actually need the name
225
00:11:18.310 --> 00:11:20.700
'cause the logo is going to do that.
226
00:11:20.700 --> 00:11:22.850
Our banner_image_url I'm gonna save
227
00:11:22.850 --> 00:11:25.290
that for later you're gonna see something pretty cool
228
00:11:25.290 --> 00:11:26.250
that we do with that.
229
00:11:26.250 --> 00:11:28.270
And then lastly, we're gonna have a link,
230
00:11:28.270 --> 00:11:32.050
so let's add in one more div,
231
00:11:32.050 --> 00:11:33.690
so inside of this div,
232
00:11:33.690 --> 00:11:37.300
this is where we're gonna put the url.
233
00:11:37.300 --> 00:11:40.630
Once again, we're not gonna worry about the styles,
234
00:11:40.630 --> 00:11:42.370
but we will give it a class name,
235
00:11:42.370 --> 00:11:43.830
so for the class name let's call
236
00:11:43.830 --> 00:11:47.480
this the bottom-content-wrapper.
237
00:11:47.480 --> 00:11:49.490
And then this is gonna be a link
238
00:11:49.490 --> 00:11:51.060
and this is an outside link,
239
00:11:51.060 --> 00:11:54.410
so in this one we're not using the link component
240
00:11:54.410 --> 00:11:56.970
from react router, this is an outside link,
241
00:11:56.970 --> 00:11:59.180
so I'm just gonna give it an a tag
242
00:11:59.180 --> 00:12:03.430
and then I'll say a tag and href
243
00:12:03.430 --> 00:12:07.270
and we'll set this equal to the url
244
00:12:07.270 --> 00:12:08.480
so I can get rid of that
245
00:12:08.480 --> 00:12:13.480
and then I'm gonna say target*_ blank,
246
00:12:13.540 --> 00:12:16.310
What that's gonna do is it means that it's going
247
00:12:16.310 --> 00:12:19.940
to actually go and open up a new tab
248
00:12:19.940 --> 00:12:21.580
whenever a user clicks on it.
249
00:12:21.580 --> 00:12:25.560
And for right now, we can just say visit
250
00:12:26.610 --> 00:12:30.160
and that will open up a link with that site,
251
00:12:30.160 --> 00:12:31.510
so you can see down here
252
00:12:31.510 --> 00:12:33.350
it's pretty small we'll style it later.
253
00:12:33.350 --> 00:12:36.310
But if I click on this, you'll see it directs me
254
00:12:36.310 --> 00:12:39.610
to that url so that is working nicely.
255
00:12:39.610 --> 00:12:41.000
And if you want to make this dynamic,
256
00:12:41.000 --> 00:12:42.750
this is where we could use the name.
257
00:12:42.750 --> 00:12:44.500
So right here I could say visit
258
00:12:44.500 --> 00:12:47.080
and then can use curly brackets
259
00:12:47.080 --> 00:12:50.150
and this would be a good spot, we can use the name here
260
00:12:50.150 --> 00:12:52.450
and now this link will be dynamic,
261
00:12:52.450 --> 00:12:54.380
it'll say "visit daily smarty."
262
00:12:54.380 --> 00:12:57.050
And now this should work for all of the other pages,
263
00:12:57.050 --> 00:13:00.180
so now if I come here, it says visit chrondose
264
00:13:00.180 --> 00:13:04.060
and it has a different link on this page as well.
265
00:13:04.060 --> 00:13:06.550
So now each one of these are dynamic,
266
00:13:06.550 --> 00:13:08.470
they're pulling in the correct data,
267
00:13:08.470 --> 00:13:11.140
we're populating the data on the screen,
268
00:13:11.140 --> 00:13:13.410
we're being able to slide some of the data in
269
00:13:13.410 --> 00:13:17.650
for images in the links and we have a basic structure.
270
00:13:17.650 --> 00:13:19.660
So all of that's working nicely.
271
00:13:19.660 --> 00:13:22.510
Now that we have that in place in the next guide,
272
00:13:22.510 --> 00:13:26.430
we're gonna see how we can create a background image.
273
00:13:26.430 --> 00:13:28.630
Now this is kind of extending the knowledge
274
00:13:28.630 --> 00:13:32.470
that we already did on our homepage,
275
00:13:32.470 --> 00:13:34.890
but because this is kind of an advanced topic
276
00:13:34.890 --> 00:13:36.960
and might've been a little confusing,
277
00:13:36.960 --> 00:13:39.640
I thought we could do something kind of similar here,
278
00:13:39.640 --> 00:13:42.050
and so it can reinforce what we already learned
279
00:13:42.050 --> 00:13:44.880
and we can have a really nice looking interface
280
00:13:44.880 --> 00:13:47.963
for our portfolio detail pages.