WEBVTT 00:01.610 --> 00:02.150 Okay. 00:02.150 --> 00:10.270 In this video we will be talking about loops, how we can actually perform and display a loop element. 00:10.280 --> 00:13.190 So before we will do that, we need to. 00:14.920 --> 00:20.340 Create an array that we can use in our example. 00:20.350 --> 00:27.340 So let's create a constant and that will be an array of animals like that. 00:27.340 --> 00:34.000 And what I can do is it will be a simple array and we can do a cat and then we can do another one dog, 00:34.030 --> 00:37.630 and then let's say horse. 00:37.630 --> 00:40.000 So we have a simple array here. 00:40.000 --> 00:48.010 And if we would like to loop through all that animals and put it on the page, we need to do it here. 00:48.010 --> 00:56.500 So what we can do, I will remove what we had before and I will have just one single curly brackets 00:56.500 --> 00:58.510 here and we'll start it from here. 00:58.510 --> 00:59.470 So if I will save it. 00:59.470 --> 01:05.830 Now you can see there is not an A in the footer actually, because at the moment we are working in the 01:05.830 --> 01:06.190 footer. 01:06.190 --> 01:10.750 JS So what we can do is we can access our. 01:13.380 --> 01:17.910 Variable as it is here and then we can do map on it. 01:17.940 --> 01:20.130 Map is a JavaScript function. 01:20.130 --> 01:29.910 So basically what we have here it is it we need to pass a callback and we can loop through all of it 01:29.910 --> 01:32.220 and do something for each record. 01:32.250 --> 01:35.820 We can do a traditional function or we can do arrow function. 01:35.820 --> 01:38.820 I will do an arrow function here so I can do animal. 01:40.040 --> 01:40.670 Like that. 01:40.670 --> 01:50.000 So it's a variable that will have an access to wherever we will loop for an next item and then I will 01:50.000 --> 01:52.610 have curly brackets again. 01:52.610 --> 01:54.980 So this is my function here. 01:55.700 --> 02:00.770 And so what I can do here is I can return something. 02:00.770 --> 02:06.350 So return and I can I could return animal like that. 02:06.350 --> 02:07.580 So that's my. 02:08.450 --> 02:12.980 Simplest loop from from what I can do now. 02:12.980 --> 02:20.510 So if I will save it, You can see here cat, dog, horse altogether because I just return animal and 02:20.510 --> 02:20.990 animal. 02:20.990 --> 02:23.120 It's just a simple string. 02:23.120 --> 02:30.830 So what I can also do is I can do any element we have like that. 02:33.610 --> 02:34.480 So if I will save it. 02:34.480 --> 02:37.900 Now, you can see this is not printed anymore. 02:37.900 --> 02:42.880 What I will need to do is I will need to wrap it in another curly bracket. 02:42.880 --> 02:44.920 So that means use the animal. 02:44.920 --> 02:46.180 But it's not going to be word. 02:46.180 --> 02:50.050 It will be actually a value from this animal. 02:50.050 --> 02:51.490 So I will save it. 02:51.490 --> 02:53.350 Now you can see cat, dog, horse. 02:53.380 --> 02:54.930 It is displayed. 02:54.940 --> 03:01.750 So that's a simple loop we have on our page and it's looping through all of them and do one for each 03:01.780 --> 03:02.350 of it. 03:02.380 --> 03:04.270 So what else we can do? 03:04.300 --> 03:06.880 We can have more than one line. 03:06.880 --> 03:16.060 So we already talked about how to do it, so we'll need to wrap this in the parentheses and then I could 03:16.450 --> 03:25.960 do something like that and then I could, let's say, duplicate this and also I will do a div. 03:29.090 --> 03:29.960 Like this. 03:33.580 --> 03:37.300 And then I will save it. 03:37.480 --> 03:39.340 So you can see each of these. 03:39.370 --> 03:41.410 It's printed twice. 03:41.410 --> 03:46.030 So we are not restricted to just one line or one thing to display. 03:46.030 --> 03:48.790 We can display here anything what we like. 03:48.880 --> 03:56.200 So that's very useful for things like if we have a complex object and let's say we would like to see 03:56.200 --> 04:02.410 our titles of the articles or something, we can actually go for each article and then we can have a 04:02.410 --> 04:05.350 title, we can have a description image and so on and so on. 04:05.350 --> 04:12.910 So this, this will be a very useful map method that it is available on the JavaScript and we can use 04:12.910 --> 04:15.010 it for looping in our view. 04:15.190 --> 04:20.530 And but there is one thing that I would like to show you that is not working at the moment. 04:20.530 --> 04:25.090 So if I will inspect this page and I will go to the console. 04:26.550 --> 04:28.650 I will make it on the bottom. 04:29.650 --> 04:30.870 I like that. 04:31.050 --> 04:35.480 So you can see each child in the list should have a unique key prop. 04:35.490 --> 04:36.880 And so what? 04:36.880 --> 04:38.670 What does it mean exactly? 04:38.670 --> 04:47.310 It means that if we loop through that, React doesn't really know what to do with this one because it 04:47.310 --> 04:51.720 will try to treat every single record as a unique one. 04:51.720 --> 04:55.980 So what we need to do is we need to pass a key to our loop. 04:55.980 --> 05:04.920 And if I will pass it key like here, normally if you have just one record like H one returned here, 05:04.920 --> 05:06.600 you will need to pass a key here. 05:06.600 --> 05:09.690 But you always do it on the top level. 05:09.690 --> 05:18.420 So if you return this div, this div will need to have a key and I can do key here and then I can name 05:18.420 --> 05:20.040 it in a unique way. 05:20.070 --> 05:25.290 I can do animal here because I know that animal is unique. 05:25.290 --> 05:26.910 I have cat, dog and horse. 05:26.910 --> 05:29.230 So what I could do is I could save it. 05:29.230 --> 05:34.180 And now I don't have that error anymore because what I'm doing is each of these items. 05:34.180 --> 05:36.070 So this is one item here. 05:36.100 --> 05:41.110 This is another item because I print it twice and this is another item. 05:41.110 --> 05:46.150 So each of these is unique because I add key animal to it. 05:46.150 --> 05:49.060 So if I will copy on this and inspect. 05:50.640 --> 05:57.900 And then it's a little bit I will need to make a little bit more space here and but maybe on the side. 06:00.490 --> 06:04.720 If I go here, I can't really see keys here. 06:04.720 --> 06:14.470 But that's very that's unique for React and React will treat this as a separate item on the page. 06:14.470 --> 06:21.280 In this way he can actually distinguish in between these different items in a in a loop. 06:21.280 --> 06:22.690 So that's how it is. 06:22.690 --> 06:27.430 Things are done and we can do a loop this way. 06:27.790 --> 06:34.900 But normally if you have an array like this, you should find something that will be for sure. 06:34.900 --> 06:35.890 Uniqueness. 06:36.340 --> 06:43.060 I know this is unique because I just made it up, but if you fetch some data from the database, from 06:43.060 --> 06:48.460 some backend, then you you can't be sure all of them will be different or unique. 06:48.460 --> 06:55.450 So what you can do is usually when you loop through the array of objects, you have something like an 06:55.480 --> 06:58.090 ID, so you will have animal ID. 06:58.090 --> 07:05.240 In our case we don't have it because it's a simple string, not an object, but the ID will be perfect 07:05.240 --> 07:11.990 for our keys and then you can have animal name or whatever you might have on your object. 07:11.990 --> 07:20.090 But the ID are ideal candidates for using that for key because we know that ID is unique coming from 07:20.090 --> 07:21.050 a database. 07:21.050 --> 07:24.170 So this is the way we can actually use it. 07:24.170 --> 07:31.550 But in our case we don't have it and we are secure because I've made up this array and I know this is 07:31.550 --> 07:36.860 all unique, so I will save it and I can actually get rid of one of those. 07:37.490 --> 07:39.350 And we have our loop here.