- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.540 --> 00:00:02.860
In this guide, we're gonna start building out
2
00:00:02.860 --> 00:00:05.690
our portfolio list component.
3
00:00:05.690 --> 00:00:08.440
And I think it will be helpful to get an idea for
4
00:00:08.440 --> 00:00:10.940
what the end result is gonna look like.
5
00:00:10.940 --> 00:00:14.060
So eventually our homepage is gonna look like this,
6
00:00:14.060 --> 00:00:19.060
where we have this grid of all of our portfolio items.
7
00:00:19.420 --> 00:00:22.020
Now, eventually we're gonna be pulling these in
8
00:00:22.020 --> 00:00:25.150
from an API, so an outside source.
9
00:00:25.150 --> 00:00:29.050
But for right now, we're simply gonna start building out
10
00:00:29.050 --> 00:00:30.590
this type of layout.
11
00:00:30.590 --> 00:00:33.340
And we're gonna see how we can use components
12
00:00:33.340 --> 00:00:37.310
and specifically how we can use a Map,
13
00:00:37.310 --> 00:00:40.240
which is a special type of function in JavaScript
14
00:00:40.240 --> 00:00:44.390
to be able to loop over the full collection of records
15
00:00:44.390 --> 00:00:47.630
and render multiple records onto the screen
16
00:00:47.630 --> 00:00:49.660
'cause that's something we've not done yet.
17
00:00:49.660 --> 00:00:53.430
And so let's get started with that in this guide.
18
00:00:53.430 --> 00:00:56.010
So I have our code open right now
19
00:00:56.010 --> 00:00:58.730
and one nice little cleanup item we can do
20
00:00:58.730 --> 00:01:01.860
is we can remove this NavBar component here.
21
00:01:01.860 --> 00:01:04.010
And now we can start building out
22
00:01:04.010 --> 00:01:08.050
that initial home page portfolio list.
23
00:01:08.050 --> 00:01:11.530
Now, technically we could put all of that code right
24
00:01:11.530 --> 00:01:15.910
here in the JSX and we could even put our API calls
25
00:01:15.910 --> 00:01:19.440
and we could do everything like that on the homepage,
26
00:01:19.440 --> 00:01:22.250
but that's really not a best practice.
27
00:01:22.250 --> 00:01:25.150
If you ever find yourself building out a component
28
00:01:25.150 --> 00:01:28.520
and it's getting into hundreds or even thousands
29
00:01:28.520 --> 00:01:32.520
of lines long, then it's probably a really good indicator
30
00:01:32.520 --> 00:01:37.070
that that component should be broken in to smaller modules.
31
00:01:37.070 --> 00:01:38.820
And we're gonna start with that.
32
00:01:38.820 --> 00:01:43.820
So instead of having really any portfolio logic here
33
00:01:44.900 --> 00:01:47.510
or any data here in the homepage,
34
00:01:47.510 --> 00:01:49.710
we're instead gonna create
35
00:01:49.710 --> 00:01:53.750
a dedicated portfolio items component.
36
00:01:53.750 --> 00:01:55.840
So let's get started with that first.
37
00:01:55.840 --> 00:01:59.310
I'm gonna open up the side panel here
38
00:01:59.310 --> 00:02:01.670
to look at the file system, and I'm gonna go up into
39
00:02:01.670 --> 00:02:03.840
the components directory,
40
00:02:03.840 --> 00:02:06.550
and I'm gonna create a new directory inside of it.
41
00:02:06.550 --> 00:02:08.100
So I'll click New File,
42
00:02:08.100 --> 00:02:13.100
and I'm just gonna say portfolio/PortfolioItems.js.
43
00:02:16.450 --> 00:02:19.860
So that's gonna create our portfolio items component.
44
00:02:19.860 --> 00:02:24.760
And for right now let's just import React from "react".
45
00:02:24.760 --> 00:02:26.727
And then let's just make sure this works.
46
00:02:26.727 --> 00:02:30.370
I'm gonna say export default.
47
00:02:30.370 --> 00:02:33.120
We're not gonna pass in any props right now.
48
00:02:33.120 --> 00:02:36.820
And then let's just return a div that says
49
00:02:36.820 --> 00:02:39.703
portfolio items here.
50
00:02:40.750 --> 00:02:41.600
Hit Save.
51
00:02:41.600 --> 00:02:45.120
And now in the homepage here, I'm gonna get rid
52
00:02:45.120 --> 00:02:50.120
of this h1 and this h2 and also even the testing styles,
53
00:02:50.390 --> 00:02:52.780
because all of that was just a placeholder.
54
00:02:52.780 --> 00:02:57.480
And instead I'm gonna go and I'm gonna import all of that
55
00:02:57.480 --> 00:02:59.490
portfolio item code.
56
00:02:59.490 --> 00:03:01.560
We're also gonna get rid of
57
00:03:01.560 --> 00:03:05.470
all of these style functions and variables.
58
00:03:05.470 --> 00:03:09.070
So if you have the auto importer,
59
00:03:09.070 --> 00:03:12.010
then you could just go right into the JSX,
60
00:03:12.010 --> 00:03:15.920
start typing out portfolio items and hit Tab,
61
00:03:15.920 --> 00:03:17.090
and now we'll import it.
62
00:03:17.090 --> 00:03:19.650
If not, then you can just go and I'll zoom out
63
00:03:19.650 --> 00:03:22.100
so you can see it a little easier.
64
00:03:22.100 --> 00:03:25.520
Just go and say import portfolio items from,
65
00:03:25.520 --> 00:03:28.340
and then from where our homepage component is,
66
00:03:28.340 --> 00:03:33.340
you'd say, ../components portfolio PortfolioItems.
67
00:03:33.530 --> 00:03:38.530
So using auto importer or using the manual imports
68
00:03:38.980 --> 00:03:40.160
can to do the same thing.
69
00:03:40.160 --> 00:03:43.840
So let's hit Save here and let's see if this is working.
70
00:03:43.840 --> 00:03:46.030
So yes, this looks like it's good.
71
00:03:46.030 --> 00:03:49.460
As you can see right here, it says portfolio items here.
72
00:03:49.460 --> 00:03:53.310
So we've successfully created a new function component
73
00:03:53.310 --> 00:03:55.010
and rendered it.
74
00:03:55.010 --> 00:03:58.440
So far everything that we've done right there
75
00:03:58.440 --> 00:04:00.840
is what we've covered so far in the course.
76
00:04:00.840 --> 00:04:04.130
Now let's create a list of items.
77
00:04:04.130 --> 00:04:06.560
So we're not gonna worry about images or styles
78
00:04:06.560 --> 00:04:09.360
or anything like that, because what I'm gonna teach you
79
00:04:09.360 --> 00:04:12.680
right now is something that you're gonna be using
80
00:04:12.680 --> 00:04:17.470
for your entire development career as it applies to React.
81
00:04:17.470 --> 00:04:19.450
So it's a very important concept.
82
00:04:19.450 --> 00:04:23.020
So I simply wanna focus on the ability to loop over
83
00:04:23.020 --> 00:04:26.580
a collection and then render those items on the screen.
84
00:04:26.580 --> 00:04:28.460
So let's get started here.
85
00:04:28.460 --> 00:04:32.250
I'm going to create a new variable inside of the component
86
00:04:32.250 --> 00:04:35.030
and let's just call this items.
87
00:04:35.030 --> 00:04:37.570
And then this is gonna be an array.
88
00:04:37.570 --> 00:04:42.450
And then inside of items, we are going to have an object.
89
00:04:42.450 --> 00:04:45.750
So you may wonder why are we hard coding this in
90
00:04:45.750 --> 00:04:48.510
'cause eventually we're gonna have to call an API
91
00:04:48.510 --> 00:04:49.750
and bring this data in.
92
00:04:49.750 --> 00:04:53.270
And the reason is because many times you'll find that
93
00:04:53.270 --> 00:04:55.800
when you're building out your applications,
94
00:04:55.800 --> 00:04:57.770
you really don't wanna go and jump
95
00:04:57.770 --> 00:05:00.930
into too many features all at one time,
96
00:05:00.930 --> 00:05:03.060
because then it can get really confusing
97
00:05:03.060 --> 00:05:05.090
when you start to run into bugs.
98
00:05:05.090 --> 00:05:08.210
So say that I made the decision to say,
99
00:05:08.210 --> 00:05:10.740
we're not even gonna add placeholder data.
100
00:05:10.740 --> 00:05:12.160
We're simply gonna go out
101
00:05:12.160 --> 00:05:14.370
and we're going to learn about APIs,
102
00:05:14.370 --> 00:05:16.170
then we're gonna have to learn about Jason,
103
00:05:16.170 --> 00:05:20.020
then we're gonna have to learn about updating the view,
104
00:05:20.020 --> 00:05:23.070
and then we're gonna learn how to map over those elements,
105
00:05:23.070 --> 00:05:26.640
and that's just a lot of things will happen in at one time.
106
00:05:26.640 --> 00:05:29.720
And it doesn't matter if you're a brand new developer
107
00:05:29.720 --> 00:05:33.570
or if you've been doing this for a very long time,
108
00:05:33.570 --> 00:05:36.410
it's always a good idea to break your features
109
00:05:36.410 --> 00:05:39.160
into small manageable chunks.
110
00:05:39.160 --> 00:05:41.560
That's just gonna help you understand them better.
111
00:05:41.560 --> 00:05:46.560
So what I'm doing here is I'm just creating a very basic
112
00:05:46.740 --> 00:05:50.220
object array here, and it's gonna be an array of objects.
113
00:05:50.220 --> 00:05:51.860
And for right now, I'm just gonna make
114
00:05:51.860 --> 00:05:53.450
the objects dead simple.
115
00:05:53.450 --> 00:05:55.340
So I'm gonna add an object here.
116
00:05:55.340 --> 00:05:59.030
That's gonna have an ID and the first one's gonna be one.
117
00:05:59.030 --> 00:06:02.480
Then after that, let's just give it a title.
118
00:06:02.480 --> 00:06:06.370
And then I'm gonna start adding some names of some companies
119
00:06:06.370 --> 00:06:09.290
that I've worked for 'cause this is our portfolio.
120
00:06:09.290 --> 00:06:10.410
So this is the first one.
121
00:06:10.410 --> 00:06:14.600
So that's gonna be the first and I'll add just a few more,
122
00:06:14.600 --> 00:06:17.670
just so we can see this, it's we don't need the full list
123
00:06:17.670 --> 00:06:19.850
right now because I'm just wanting to show you
124
00:06:19.850 --> 00:06:21.740
how you can render this over.
125
00:06:21.740 --> 00:06:25.290
So next one's gonna be Eventbrite.
126
00:06:25.290 --> 00:06:30.290
And then third one we'll put in DevCamp
127
00:06:30.697 --> 00:06:33.070
and that's all that I'm gonna use right there.
128
00:06:33.070 --> 00:06:36.930
So just kind of getting back to vanilla JavaScript,
129
00:06:36.930 --> 00:06:40.050
this is an array and it's an array of objects.
130
00:06:40.050 --> 00:06:43.470
Each object has an ID and it has a title.
131
00:06:43.470 --> 00:06:48.300
Now this is actually a very small form of what the array
132
00:06:48.300 --> 00:06:51.410
is gonna look like and what the API calls gonna look like
133
00:06:51.410 --> 00:06:54.540
when we're actually communicating with a real life server.
134
00:06:54.540 --> 00:06:57.740
So this is really good because this is mimicking
135
00:06:57.740 --> 00:07:00.220
what we're gonna be using eventually.
136
00:07:00.220 --> 00:07:02.940
So let's just hit Save here.
137
00:07:02.940 --> 00:07:07.940
And now what we're gonna do is we're going to loop over
138
00:07:08.280 --> 00:07:11.910
this collection and we're gonna render the title
139
00:07:11.910 --> 00:07:14.380
for each one of these here.
140
00:07:14.380 --> 00:07:17.020
I'll zoom in to make it a little easier to see,
141
00:07:17.020 --> 00:07:19.110
and let's do that here.
142
00:07:19.110 --> 00:07:21.900
I'm gonna first show you how we can do it inline.
143
00:07:21.900 --> 00:07:23.430
And then I'm gonna show you
144
00:07:23.430 --> 00:07:26.690
how we can break it out into a function.
145
00:07:26.690 --> 00:07:31.120
So inline in your JSX code, use curly brackets
146
00:07:31.120 --> 00:07:36.100
and say items.map, and that's the key word here.
147
00:07:36.100 --> 00:07:38.710
That's main thing I want you to understand, Map
148
00:07:38.710 --> 00:07:42.520
and then Map is a function, so add your parenths,
149
00:07:42.520 --> 00:07:47.410
and then we're just gonna say item a fat arrow function,
150
00:07:47.410 --> 00:07:52.030
and then let's just do a div, close off the div,
151
00:07:52.030 --> 00:07:55.530
and then inside of here, use curly brackets.
152
00:07:55.530 --> 00:07:59.263
And we'll say item.title.
153
00:08:00.773 --> 00:08:02.500
Let's see, hit Save.
154
00:08:02.500 --> 00:08:05.360
Let's see if this works and there you go.
155
00:08:05.360 --> 00:08:09.580
You can see, we have Quip, Eventbrite and DevCamp.
156
00:08:09.580 --> 00:08:12.290
So what is going on here?
157
00:08:12.290 --> 00:08:13.550
If you've never seen this before,
158
00:08:13.550 --> 00:08:15.830
this is gonna seem really weird.
159
00:08:15.830 --> 00:08:17.810
So let's kind of walk through it.
160
00:08:17.810 --> 00:08:20.470
So we first use curly brackets 'cause we need
161
00:08:20.470 --> 00:08:24.350
to render JavaScript inside of this function.
162
00:08:24.350 --> 00:08:25.600
That makes sense.
163
00:08:25.600 --> 00:08:30.400
Now, inside of here, we called items, which is our array.
164
00:08:30.400 --> 00:08:33.443
Then we called the Map function.
165
00:08:35.490 --> 00:08:38.170
This is what is making all of the magic happen.
166
00:08:38.170 --> 00:08:43.080
This is how we're able to render these elements out.
167
00:08:43.080 --> 00:08:46.310
And then inside of that, what we're doing is,
168
00:08:46.310 --> 00:08:49.200
so what Map is doing is it's looping over.
169
00:08:49.200 --> 00:08:52.960
It's similar to a full loop or anything like that
170
00:08:52.960 --> 00:08:56.600
in the sense that it's looping over a collection.
171
00:08:56.600 --> 00:09:00.390
Now, where Map is different in regards to JavaScript
172
00:09:00.390 --> 00:09:05.390
and React is Map returns, an array of items.
173
00:09:05.550 --> 00:09:10.550
So what Map is doing is Map is looping over this collection
174
00:09:11.220 --> 00:09:14.110
but then as far as JavaScript is seen,
175
00:09:14.110 --> 00:09:19.110
it's actually rendering back a array of a div.
176
00:09:19.240 --> 00:09:24.240
So that is really how the magic happens with rendering
177
00:09:24.430 --> 00:09:27.450
those items out, as it loops over the collection,
178
00:09:27.450 --> 00:09:32.450
it is rendering a item with a title
179
00:09:32.770 --> 00:09:35.360
and it's wrapping all of that up in a div.
180
00:09:35.360 --> 00:09:39.853
If you wanted to, you could switch this to be a h1 tag,
181
00:09:41.260 --> 00:09:44.370
and now each one of these is gonna be much larger,
182
00:09:44.370 --> 00:09:45.520
just like this.
183
00:09:45.520 --> 00:09:47.090
So what Map is doing,
184
00:09:47.090 --> 00:09:48.800
it's just looping over that collection.
185
00:09:48.800 --> 00:09:53.800
It's returning whatever JSX code we place inside of here.
186
00:09:54.270 --> 00:09:56.730
So you don't have to really worry about
187
00:09:56.730 --> 00:09:59.560
exactly what's happening behind the scenes,
188
00:09:59.560 --> 00:10:02.470
but it's good to have a high level idea of it
189
00:10:02.470 --> 00:10:07.417
because how exactly is it possible that JSX and React
190
00:10:08.410 --> 00:10:09.910
knows what's going on here?
191
00:10:09.910 --> 00:10:12.850
And it's because we are returning an array
192
00:10:12.850 --> 00:10:17.190
and that array is simply what React is looking for
193
00:10:17.190 --> 00:10:19.030
to render it onto the screen.
194
00:10:19.030 --> 00:10:20.690
So that's what's happening here.
195
00:10:20.690 --> 00:10:23.330
Now, we can actually clean this code up a little bit
196
00:10:23.330 --> 00:10:26.390
because imagine a scenario where you're adding
197
00:10:26.390 --> 00:10:31.390
all of your styles and you're adding all of the images
198
00:10:31.600 --> 00:10:33.740
and you have all these kinds of data calls in here.
199
00:10:33.740 --> 00:10:37.600
If you placed it directly in line in the JSX code,
200
00:10:37.600 --> 00:10:39.640
that could start to get kind of messy.
201
00:10:39.640 --> 00:10:41.700
So instead, what I'm gonna do is I'm gonna actually
202
00:10:41.700 --> 00:10:43.970
break this into a function.
203
00:10:43.970 --> 00:10:48.970
So up top here, I'm gonna say const itemsRenderer,
204
00:10:49.000 --> 00:10:50.640
and you can call this whatever you want.
205
00:10:50.640 --> 00:10:53.170
That's just kind of the naming convention I follow.
206
00:10:53.170 --> 00:10:55.230
It's not gonna take any arguments.
207
00:10:55.230 --> 00:10:59.620
And then inside of here, we are going to return pretty much
208
00:10:59.620 --> 00:11:01.560
exactly what we have right here.
209
00:11:01.560 --> 00:11:05.780
So I'm gonna say return items.map,
210
00:11:05.780 --> 00:11:08.460
and then once again, I'm just gonna call the item
211
00:11:08.460 --> 00:11:13.197
and then inside of that, I'm gonna return a div.
212
00:11:14.440 --> 00:11:19.190
And then inside of that, I'm gonna say item.title,
213
00:11:19.190 --> 00:11:21.420
make sure you close off that curly bracket
214
00:11:21.420 --> 00:11:23.550
and that's gonna be all we need to do.
215
00:11:23.550 --> 00:11:26.120
Now, what I can do is I can call this function
216
00:11:26.120 --> 00:11:29.290
so I can get rid of all this code we wrote right here
217
00:11:29.290 --> 00:11:30.920
and inside a curly brackets,
218
00:11:30.920 --> 00:11:35.120
I can say itemsRenderer, hit Save like this.
219
00:11:35.120 --> 00:11:37.160
And you'll see that that's now working
220
00:11:37.160 --> 00:11:39.060
and it's doing the exact same thing.
221
00:11:39.060 --> 00:11:41.420
So you're gonna notice that we're gonna do this a lot
222
00:11:41.420 --> 00:11:44.530
throughout this course is instead of having
223
00:11:44.530 --> 00:11:47.540
a large amount of logic in the JSX code,
224
00:11:47.540 --> 00:11:50.350
we're going to break that out into either
225
00:11:50.350 --> 00:11:54.130
dedicated components or into functions.
226
00:11:54.130 --> 00:11:56.450
And so that's what we're doing right here.
227
00:11:56.450 --> 00:12:01.450
So at a high level we have now really we've done everything
228
00:12:01.510 --> 00:12:04.730
we need to do to loop through a collection of items
229
00:12:04.730 --> 00:12:06.260
and render them on the screen.
230
00:12:06.260 --> 00:12:09.810
Now I'm gonna show you one final thing in this guide,
231
00:12:09.810 --> 00:12:13.010
and you'll see if you have your console open,
232
00:12:13.010 --> 00:12:16.030
you're gonna see that we actually have a warning
233
00:12:16.030 --> 00:12:17.350
or an error here.
234
00:12:17.350 --> 00:12:20.440
Well, just a warning, but it's a serious one
235
00:12:21.380 --> 00:12:23.300
and React takes us very seriously.
236
00:12:23.300 --> 00:12:27.920
So it says right here, warning, each child in a list
237
00:12:27.920 --> 00:12:30.810
should have a unique key prop.
238
00:12:30.810 --> 00:12:33.500
So what exactly does that mean?
239
00:12:33.500 --> 00:12:36.610
Well, there is a prop and it's something
240
00:12:36.610 --> 00:12:38.680
that React uses a lot.
241
00:12:38.680 --> 00:12:41.800
Anytime that you're using an array
242
00:12:41.800 --> 00:12:44.430
or you're mapping over a collection,
243
00:12:44.430 --> 00:12:48.620
you need to tell React what makes one element
244
00:12:48.620 --> 00:12:50.460
different than the other.
245
00:12:50.460 --> 00:12:52.910
And it has, the reason why you have to do this is
246
00:12:52.910 --> 00:12:57.910
because it has to deal with how React is rebuilding
247
00:12:58.430 --> 00:12:59.960
the DOM here.
248
00:12:59.960 --> 00:13:04.440
So how it knows to put the Quip element here at the top
249
00:13:04.440 --> 00:13:08.070
and the Eventbrite one right after that and DevCamp here,
250
00:13:08.070 --> 00:13:12.440
React is keeping track of each one of those div elements
251
00:13:12.440 --> 00:13:17.080
and we need to tell React what makes the Quip element
252
00:13:17.080 --> 00:13:19.450
different than say the DevCamp one.
253
00:13:19.450 --> 00:13:22.040
And so that is what the key prop does.
254
00:13:22.040 --> 00:13:25.170
So any time that you're using Map or an array,
255
00:13:25.170 --> 00:13:27.530
and you're rendering those items out to the screen,
256
00:13:27.530 --> 00:13:29.510
you need to use a key prop.
257
00:13:29.510 --> 00:13:31.670
So let's see how we can do that.
258
00:13:31.670 --> 00:13:35.850
So when I say items.map, and then I'm looping over that div,
259
00:13:35.850 --> 00:13:37.950
when I'm returning the div,
260
00:13:37.950 --> 00:13:42.343
now I need to say key equals item.
261
00:13:43.230 --> 00:13:45.700
and then in this case, I'm gonna use the ID.
262
00:13:45.700 --> 00:13:47.210
So, but you could use anything.
263
00:13:47.210 --> 00:13:50.540
Technically I could have used the title,
264
00:13:50.540 --> 00:13:53.900
all that has to matter is that whatever we're passing in
265
00:13:53.900 --> 00:13:56.440
as the key has to be unique.
266
00:13:56.440 --> 00:14:00.130
So say that we add two IDs and this would never happen
267
00:14:00.130 --> 00:14:02.400
'cause ID is the unique identifier.
268
00:14:02.400 --> 00:14:05.200
But say we had two keys that were both two
269
00:14:05.200 --> 00:14:09.830
then we would not be able to use the ID here for the key
270
00:14:09.830 --> 00:14:11.330
because it's not unique.
271
00:14:11.330 --> 00:14:12.450
So you have to make sure that
272
00:14:12.450 --> 00:14:15.310
whatever you're using is unique.
273
00:14:15.310 --> 00:14:20.020
So if I hit Save now and open up the console
274
00:14:20.020 --> 00:14:22.710
and you can hit Refresh just to see,
275
00:14:22.710 --> 00:14:27.133
if you scroll up, you can see that that warning is now gone.
276
00:14:28.630 --> 00:14:32.440
That's kind of an introduction to how the key prop works
277
00:14:32.440 --> 00:14:33.800
and we're gonna be using this.
278
00:14:33.800 --> 00:14:36.700
Anytime we use Map, we're gonna use a key.
279
00:14:36.700 --> 00:14:40.490
Now, one final element here related to the key
280
00:14:40.490 --> 00:14:43.920
that's important to know, because this can really trip up
281
00:14:43.920 --> 00:14:48.270
some developers, I've seen, is that if you were to, say,
282
00:14:48.270 --> 00:14:50.980
you started with this code right here,
283
00:14:50.980 --> 00:14:55.170
but eventually you were gonna do exactly what we're gonna do
284
00:14:55.170 --> 00:14:57.340
which is to make it a little more complex we're gonna
285
00:14:57.340 --> 00:15:01.000
add things like a description and a logo and a background.
286
00:15:01.000 --> 00:15:02.123
And you went and you said,
287
00:15:02.123 --> 00:15:07.123
"I'm gonna wrap this entire div up in a parent div."
288
00:15:08.350 --> 00:15:12.200
So I'm gonna do that, and then I'm gonna close this div up.
289
00:15:12.200 --> 00:15:16.080
Now, if I hit Save again, you may think that everything's
290
00:15:16.080 --> 00:15:18.010
fine, but if you open up your console,
291
00:15:18.010 --> 00:15:21.530
you'll see that that key warning is back up.
292
00:15:21.530 --> 00:15:26.530
And that is because the key needs to be at the very root
293
00:15:27.320 --> 00:15:30.560
of whatever JSX is getting returned.
294
00:15:30.560 --> 00:15:35.560
So now you can see that that will remove the warning.
295
00:15:35.670 --> 00:15:37.260
So great job if you went through that,
296
00:15:37.260 --> 00:15:41.590
I know that may seem like it took a long time
297
00:15:41.590 --> 00:15:45.930
for such a basic type of piece of functionality,
298
00:15:45.930 --> 00:15:48.490
but this is very important,
299
00:15:48.490 --> 00:15:51.580
pretty much for any type of React application
300
00:15:51.580 --> 00:15:54.170
you're gonna be building, you are gonna be going out,
301
00:15:54.170 --> 00:15:55.770
you're gonna be getting data
302
00:15:55.770 --> 00:15:58.960
and if it's a collection of data, like any type of list,
303
00:15:58.960 --> 00:16:02.520
you are gonna be replicating this exact set of steps
304
00:16:02.520 --> 00:16:05.460
every time that you do that.
305
00:16:05.460 --> 00:16:08.060
So it's an important concept to understand
306
00:16:08.060 --> 00:16:11.830
both on understanding to work with the Map function,
307
00:16:11.830 --> 00:16:16.820
and then also to work with the key and to pass that in.
308
00:16:16.820 --> 00:16:18.410
So great job if you went through that.
309
00:16:18.410 --> 00:16:20.370
In the next guide, we're gonna continue
310
00:16:20.370 --> 00:16:24.363
to build out this portfolio item page.