1 00:00:00,300 --> 00:00:06,690 All right, and once we have covered a simple example, now, of course, let's iterate over our books, 2 00:00:06,720 --> 00:00:11,540 our access each and every item, which is a object. 3 00:00:11,850 --> 00:00:16,820 So I'll start by removing the suckers starting from line twenty to twenty four. 4 00:00:17,160 --> 00:00:19,650 I'm also not going to be looking for the names. 5 00:00:19,950 --> 00:00:22,640 I'm going to go right for the box. 6 00:00:23,100 --> 00:00:31,320 So like I said, we can set up separately variable and then render it here or we can iterate over it 7 00:00:31,590 --> 00:00:36,000 in the stacks because remember that map will return in. 8 00:00:36,180 --> 00:00:36,340 Right. 9 00:00:36,720 --> 00:00:44,010 So now I go with a map method and then I would want to access each and every item in my callback function. 10 00:00:44,010 --> 00:00:44,400 Correct. 11 00:00:44,790 --> 00:00:47,160 And I'll name my parameter book. 12 00:00:47,610 --> 00:00:55,590 Just keep in mind that whatever you name, this parameter will just point to each and every object in 13 00:00:55,590 --> 00:00:56,460 our iteration. 14 00:00:56,760 --> 00:01:04,050 And for the time being, I'll just return a low because I would just want to see how everything is going 15 00:01:04,050 --> 00:01:04,360 to work. 16 00:01:04,800 --> 00:01:09,020 So once I return this hello notice I'm not acceptable. 17 00:01:09,300 --> 00:01:11,040 So what I want is great out. 18 00:01:11,400 --> 00:01:12,680 But I have two values. 19 00:01:13,110 --> 00:01:14,380 Now, why do I have to? 20 00:01:15,210 --> 00:01:17,760 Because I have two items in the array. 21 00:01:18,090 --> 00:01:26,400 So as I'm iterating with MAP, I will always return the amount of items that I have in the original. 22 00:01:26,940 --> 00:01:34,140 So if I would have two thousand since I'm just returning a hello from this function, I'll have two 23 00:01:34,320 --> 00:01:34,990 thousand. 24 00:01:35,760 --> 00:01:40,980 So now of course, if I really wanted to start out, I can say, well, show me that book. 25 00:01:41,370 --> 00:01:44,170 And that book should be this object. 26 00:01:44,670 --> 00:01:48,160 It should be the first object and second object, OK? 27 00:01:48,540 --> 00:01:55,050 And we already know that, of course, I can either access those properties using DOT so I can say book 28 00:01:55,050 --> 00:02:01,460 dot, author of book image or whatever, or of course I can use the structuring. 29 00:02:01,710 --> 00:02:02,220 So I'm here. 30 00:02:02,220 --> 00:02:09,350 I'm going to say consed and learn what properties I'm looking for the same ones I img then title and 31 00:02:09,660 --> 00:02:10,420 the author. 32 00:02:10,650 --> 00:02:13,090 Now that is coming from the book. 33 00:02:13,440 --> 00:02:15,360 Now I'm not going to consult them anymore. 34 00:02:15,600 --> 00:02:17,400 I just want to showcase that here. 35 00:02:17,400 --> 00:02:20,970 I can return whatever I would want. 36 00:02:21,390 --> 00:02:26,040 So if I really wanted to I could say that there's going to be a div. 37 00:02:26,070 --> 00:02:34,020 Now I'm not going to add a image but all the other ones where I say heading three for example, with 38 00:02:34,020 --> 00:02:39,860 a title and then having six is going to be with an author. 39 00:02:40,650 --> 00:02:42,930 So let's add those two values. 40 00:02:43,260 --> 00:02:48,470 And now of course I have the name as well as the author. 41 00:02:48,780 --> 00:02:49,900 So I have these devourers. 42 00:02:49,950 --> 00:02:55,080 Like I said, I can return whatever I would want from this my method. 43 00:02:55,350 --> 00:02:56,930 And of course that will be displayed. 44 00:02:57,480 --> 00:03:01,530 The key, of course, was that we could not render the object. 45 00:03:01,670 --> 00:03:04,680 That's why specifically we need to look for those properties. 46 00:03:04,710 --> 00:03:06,450 OK, good now. 47 00:03:07,050 --> 00:03:12,190 Well, if we put two and two together, I already have the book correct. 48 00:03:12,210 --> 00:03:13,730 I already have the component. 49 00:03:14,250 --> 00:03:20,610 So in here, if I can return whatever I want, well, why don't we return a book. 50 00:03:21,270 --> 00:03:27,240 So what we would need to do is just change around the div to a book. 51 00:03:27,840 --> 00:03:34,170 And now in the book, of course, the biggest question is how do we pass in the props? 52 00:03:34,890 --> 00:03:37,350 Well, I could add them one by one. 53 00:03:37,600 --> 00:03:40,250 I could say I'm G is equal to G. 54 00:03:40,500 --> 00:03:41,870 That equals the title. 55 00:03:42,030 --> 00:03:48,750 That is doable because please keep in mind that in a prompt I already the structure them correct. 56 00:03:48,750 --> 00:03:51,900 I heard the structure of IMG title and author. 57 00:03:52,170 --> 00:03:55,140 However, there are two other words. 58 00:03:55,140 --> 00:03:55,780 How I can do that. 59 00:03:56,040 --> 00:04:00,690 So in this video I'll show you the first one and then in the next video I'll show you how we can use 60 00:04:00,900 --> 00:04:02,930 a separate operator instead. 61 00:04:03,480 --> 00:04:11,580 So instead of passing all of them here one by one, I could simply say, all right, you know what? 62 00:04:11,880 --> 00:04:20,080 There's going to be a book prop and that book will be equal to a book that I'm passing it. 63 00:04:20,730 --> 00:04:23,520 So remember, we were looking for what? 64 00:04:24,000 --> 00:04:26,640 We were looking for the object here. 65 00:04:26,940 --> 00:04:27,350 Correct. 66 00:04:27,660 --> 00:04:33,120 So instead of the structuring one by one IMG title and author, we're going to say I'm going to be passing 67 00:04:33,330 --> 00:04:35,700 this object as a prop. 68 00:04:36,240 --> 00:04:37,320 Nothing stops me. 69 00:04:37,370 --> 00:04:40,220 However, the problem is going to be that we will get an error here. 70 00:04:40,500 --> 00:04:40,910 Why? 71 00:04:41,580 --> 00:04:47,640 Because now props is not simply a object with IMG title and author. 72 00:04:47,910 --> 00:04:52,070 It's going to be a object with a book object. 73 00:04:52,470 --> 00:04:53,190 So let's see. 74 00:04:53,490 --> 00:04:55,290 We're going to go with props. 75 00:04:56,140 --> 00:05:01,540 And like I said, there's going to be no Vallauris here because we're not accessing the title, but 76 00:05:01,540 --> 00:05:06,580 notice how Props now has the property that is the value. 77 00:05:06,880 --> 00:05:11,740 And then in that object, I see that I have my properties. 78 00:05:12,070 --> 00:05:13,600 So what do we need to do over here? 79 00:05:13,930 --> 00:05:17,350 Well, simply, we would just need to set up props. 80 00:05:17,530 --> 00:05:20,770 And then the property that I'm looking for, what is the property? 81 00:05:21,130 --> 00:05:22,630 That is, of course, a book. 82 00:05:23,270 --> 00:05:29,490 So once I do that now, I only have this warning about the child, which we will fix in the next video. 83 00:05:29,510 --> 00:05:37,220 However, let's see the cool thing where now I'm iterating over my aura and for each and every object, 84 00:05:37,460 --> 00:05:39,710 I'm returning that book. 85 00:05:40,100 --> 00:05:45,960 And what that means is that, for example, I can go and find another book. 86 00:05:46,310 --> 00:05:52,400 So, for example, this one, I'm going to go and I'm going to set up a copy image address. 87 00:05:52,790 --> 00:05:56,950 And in here, let's just make another object. 88 00:05:57,200 --> 00:06:04,430 So copy and paste for as the image value that is, of course, going to be equal to my new book, then, 89 00:06:04,430 --> 00:06:07,400 of course, will also get the author. 90 00:06:08,560 --> 00:06:16,510 Like so and I would want to do the same thing with a title as well, so a copyright value and of course 91 00:06:16,510 --> 00:06:18,530 I'll pass it in the title. 92 00:06:19,000 --> 00:06:23,170 So now if we navigate to a bigger screen, check it out. 93 00:06:23,740 --> 00:06:29,620 Whatever items we will have in our right now, of course, we are displaying them. 94 00:06:29,920 --> 00:06:37,300 And for each and every item that we have, we're using that book component and we set up the map method. 95 00:06:37,510 --> 00:06:42,850 So now we don't need to manually keep on adding this book component each and every time. 96 00:06:42,850 --> 00:06:46,960 And we don't need to manually keep on adding OMG title and author. 97 00:06:47,440 --> 00:06:55,810 But what we could do instead is just grab our book, meaning our Perama, which will point always back 98 00:06:56,080 --> 00:06:59,490 to that item in the array, which in our case is the object. 99 00:06:59,770 --> 00:07:05,020 And then of course where we have the props, we are just structuring our. 100 00:07:05,140 --> 00:07:07,300 In this case, we're not structuring the props. 101 00:07:07,570 --> 00:07:10,400 We're restructuring the book properly. 102 00:07:10,690 --> 00:07:15,550 So in this case, of course, I can just remove this book altogether. 103 00:07:15,790 --> 00:07:16,210 Correct. 104 00:07:16,540 --> 00:07:21,400 So now, of course, I can see in my console that I have three items. 105 00:07:21,760 --> 00:07:22,480 Why one? 106 00:07:22,510 --> 00:07:28,150 Because now I have three items in the array, so I guess I can remove this console as well. 107 00:07:28,390 --> 00:07:30,760 Now, we just need to fix this. 108 00:07:30,760 --> 00:07:37,120 A little warning about the fact that each child must have a unique key.