1 00:00:00,270 --> 00:00:01,710 Okay so far so good. 2 00:00:01,720 --> 00:00:07,510 We know that we can create a method we can pass it down to whatever child component we would want. 3 00:00:07,540 --> 00:00:09,100 We're using the props. 4 00:00:09,110 --> 00:00:11,870 But why don't we make this a little bit more interesting. 5 00:00:11,960 --> 00:00:13,080 And first of all you know what. 6 00:00:13,080 --> 00:00:17,050 I don't need the button right now because I'm gonna be showing you this with a book. 7 00:00:17,100 --> 00:00:22,470 Just remember that within the projects we are always going to be testing out also with the buttons. 8 00:00:22,650 --> 00:00:29,340 Meaning as we're passing more than to just one child but in our case we're gonna be testing out with 9 00:00:29,400 --> 00:00:30,210 a book. 10 00:00:30,210 --> 00:00:36,420 So in this case I can get rid of the handle delete over here so I don't need it as well as I'm not really 11 00:00:37,230 --> 00:00:39,600 crazy about that button being here anyway. 12 00:00:39,600 --> 00:00:46,410 So we basically got rid of the button and the only thing that we'd completing or I'm sorry it's complaining 13 00:00:46,410 --> 00:00:50,900 right now that we have the handle late however we're not using it. 14 00:00:50,940 --> 00:00:52,820 So why don't we go back again or here. 15 00:00:52,830 --> 00:00:55,610 Let's say that there would be some kind of a button. 16 00:00:55,800 --> 00:00:57,880 And again we're and add some type. 17 00:00:58,020 --> 00:01:02,840 In this case we're gonna call this button and let's write again on click. 18 00:01:02,900 --> 00:01:05,320 However in this case we're gonna be looking for what. 19 00:01:05,340 --> 00:01:07,970 Well until the lead. 20 00:01:08,050 --> 00:01:14,210 And here we can just say they lead me and again doesn't make sense at the moment. 21 00:01:14,260 --> 00:01:18,020 I'll show you later on obviously why we're using this text delete me. 22 00:01:18,510 --> 00:01:18,990 Let's start. 23 00:01:18,990 --> 00:01:19,980 Very simple though. 24 00:01:20,400 --> 00:01:25,470 If I'm looking here you know what these buttons can go for in the sidebar. 25 00:01:25,470 --> 00:01:28,470 Remember we had the file with book data. 26 00:01:28,650 --> 00:01:29,760 What do we have in the data. 27 00:01:30,540 --> 00:01:32,130 Well for each and every book. 28 00:01:32,220 --> 00:01:39,240 So for each and every book that's here I have the I.D. and I have image title not we already rendering 29 00:01:39,240 --> 00:01:42,030 all the images titles and authors as well. 30 00:01:42,030 --> 00:01:46,720 We are also using the I.D. as the keys. 31 00:01:46,740 --> 00:01:48,520 So so far so good. 32 00:01:48,810 --> 00:01:53,220 But what about if we would make this a little bit more interesting where we have the message and book 33 00:01:53,250 --> 00:01:58,980 list and I would like to print out to whatever I.D. This book has. 34 00:01:59,490 --> 00:02:05,630 So let's say I'm going to say that this handle the lead is gonna have the one parameter which is going 35 00:02:05,640 --> 00:02:09,330 to be I.D. and then I'm always going to say here. 36 00:02:09,450 --> 00:02:11,840 Yeah but what's it gonna be console logging Daddy. 37 00:02:11,850 --> 00:02:14,200 Very simple for now let's save it. 38 00:02:14,200 --> 00:02:17,360 Here we are passing still the handle. 39 00:02:17,400 --> 00:02:20,430 So all that stays the same within the book. 40 00:02:20,430 --> 00:02:22,140 We have the handle late. 41 00:02:22,150 --> 00:02:25,470 Everything is working fine but obviously at the moment we're gonna click it. 42 00:02:25,650 --> 00:02:27,110 Nothing is happening. 43 00:02:27,180 --> 00:02:30,660 Meaning we're getting something in a console but that's not what we wanted. 44 00:02:31,320 --> 00:02:36,960 And the reason for that is because we're not passing this argument so we're not passing the parameter 45 00:02:36,990 --> 00:02:38,340 that's being asked. 46 00:02:38,340 --> 00:02:39,710 We have the handle late. 47 00:02:39,930 --> 00:02:46,500 All that is working fine but we're not actually properly handling it on our own. 48 00:02:46,710 --> 00:02:47,520 In the book. 49 00:02:47,820 --> 00:02:54,330 So how we can do that now versus what we need to understand that we're passing down the info from the 50 00:02:54,330 --> 00:02:54,810 book list. 51 00:02:54,840 --> 00:02:59,530 Remember now info wasn't what it was each and every item. 52 00:02:59,530 --> 00:03:02,260 So we we'll gonna have that data. 53 00:03:02,490 --> 00:03:04,070 We are all gonna have the I.D.. 54 00:03:04,270 --> 00:03:07,940 So why don't we go first and just the structure of that idea. 55 00:03:08,170 --> 00:03:12,790 Why don't we say here that we're gonna be looking for the 80 and that should be the proper method. 56 00:03:12,790 --> 00:03:13,450 Right. 57 00:03:13,480 --> 00:03:14,480 So just save it. 58 00:03:14,480 --> 00:03:16,410 And why don't we test it out. 59 00:03:16,420 --> 00:03:22,580 Let's say that again we're going to console log just so we can see that everything is happening although 60 00:03:22,580 --> 00:03:26,680 we could have used the reactive tools of course as well. 61 00:03:26,680 --> 00:03:28,050 So let's say I.D.. 62 00:03:28,180 --> 00:03:32,040 So for each and one of them I'm gonna be getting one two three four five six. 63 00:03:32,160 --> 00:03:32,530 No. 64 00:03:32,550 --> 00:03:33,190 Okay. 65 00:03:33,400 --> 00:03:36,510 So if I have it here why don't we run the function. 66 00:03:36,610 --> 00:03:38,960 Why don't say okay handle delete. 67 00:03:38,950 --> 00:03:43,290 And now I'm gonna pass the and at this point what do you think is gonna happen. 68 00:03:43,440 --> 00:03:47,390 Because I have been telling you there's probably already like three times. 69 00:03:47,430 --> 00:03:53,100 What do you think is gonna happen if I'm gonna pass this I.D. the way I'm doing right now. 70 00:03:53,100 --> 00:03:54,270 Think about it. 71 00:03:54,330 --> 00:04:03,290 So I have my method but probably the issue is that I'm calling this I'm not waiting when I'm gonna click 72 00:04:03,290 --> 00:04:03,860 on it. 73 00:04:03,860 --> 00:04:09,170 I am actually calling this not knowing what's gonna happen once I say it again I'm gonna print out one 74 00:04:09,170 --> 00:04:12,180 two three four five six even though I'm not console log in. 75 00:04:12,800 --> 00:04:20,360 And the reason for that that I am passing this I.D. This is working but I'm automatically calling function 76 00:04:20,840 --> 00:04:26,330 the moment I'm rendering these components and that's not my plan because at the moment I can click all 77 00:04:26,330 --> 00:04:28,340 day long and nothing is going to happen. 78 00:04:28,400 --> 00:04:30,370 So there has to be a better way. 79 00:04:30,450 --> 00:04:35,900 There's multiple ways but I'm going to show you probably in my opinion the fastest way. 80 00:04:35,900 --> 00:04:38,510 Now that would be working with the narrow function. 81 00:04:38,510 --> 00:04:40,290 So what happens here. 82 00:04:40,340 --> 00:04:47,630 Let's say the 40 on click we all gonna pass the anonymous RL function and the way this is gonna work 83 00:04:47,630 --> 00:04:52,010 again we're gonna be getting back the implicit return remember with Arrow functions. 84 00:04:52,010 --> 00:04:53,160 That's all it is. 85 00:04:53,210 --> 00:04:58,280 So we're having the arrow function and then this is gonna be our implicit return. 86 00:04:58,280 --> 00:05:01,520 Now what we can do here is we can say no. 87 00:05:01,790 --> 00:05:03,700 Then we're looking for delete. 88 00:05:03,770 --> 00:05:07,480 And then in this case we will gonna be passing this I.D.. 89 00:05:08,040 --> 00:05:09,440 So I'm gonna say something like this. 90 00:05:09,710 --> 00:05:13,050 So let me say that and now let's see what's gonna happen. 91 00:05:13,070 --> 00:05:17,540 So now the arrow function is going to run automatically. 92 00:05:17,540 --> 00:05:18,890 So all that is going to happen. 93 00:05:19,530 --> 00:05:26,540 However the difference would be that now this narrow function is going to return this reference or in 94 00:05:26,540 --> 00:05:28,810 this case prop of this method. 95 00:05:29,270 --> 00:05:30,540 And check this out. 96 00:05:30,540 --> 00:05:36,000 So now when I click it only then I see the I.D. again seems very simple. 97 00:05:36,050 --> 00:05:38,380 You'll see in a second why we want to use the 80. 98 00:05:38,510 --> 00:05:40,380 So probably you're like Well okay. 99 00:05:40,400 --> 00:05:41,690 This doesn't make sense again. 100 00:05:41,690 --> 00:05:45,220 He went through all this just to show us that we can get the idea. 101 00:05:45,260 --> 00:05:50,750 Now there's more to it since we know right now that I can access these specific values. 102 00:05:50,750 --> 00:05:52,090 Now let's think about it. 103 00:05:52,280 --> 00:05:56,560 If I'm heading over back here where do I have the state. 104 00:05:56,600 --> 00:05:58,610 So this is where I have all my books right. 105 00:05:59,300 --> 00:06:04,520 But what if I would want to delete this particular book from this state. 106 00:06:05,060 --> 00:06:11,490 Well I cannot do it here because in this state I don't have the book even if I would I don't know remove 107 00:06:11,490 --> 00:06:12,470 this county name. 108 00:06:12,470 --> 00:06:14,200 This is not what I have here. 109 00:06:14,360 --> 00:06:16,100 All the books are in vocalist. 110 00:06:16,130 --> 00:06:21,920 So this was the whole point of showing you how we can parse these methods down to our children. 111 00:06:21,920 --> 00:06:26,870 So the children can affect this state because this is what I'm interested in right now. 112 00:06:26,870 --> 00:06:29,620 I want to delete this book when I click it here. 113 00:06:29,660 --> 00:06:31,730 I want to delete this book when I click it here. 114 00:06:32,000 --> 00:06:34,250 However I cannot do it just from the book. 115 00:06:34,250 --> 00:06:39,670 I couldn't come up with some kind of method and say please method go up and delete it. 116 00:06:39,700 --> 00:06:40,580 That's not how it works. 117 00:06:41,000 --> 00:06:46,750 So we first needed to get our hands dirty and figure out how we can pass it down. 118 00:06:46,760 --> 00:06:50,540 Now this is very crucial because again there's gonna be two differences. 119 00:06:50,540 --> 00:06:53,180 One if you're just passing down as there's not. 120 00:06:53,570 --> 00:06:55,230 And then this is just going to be reference. 121 00:06:55,290 --> 00:07:01,970 However if you're passing some kind of argument here it is crucial and I repeat this is crucial that 122 00:07:01,990 --> 00:07:03,330 we returning this. 123 00:07:03,440 --> 00:07:06,250 Again you just saw what happened if we just run the function. 124 00:07:06,260 --> 00:07:07,940 This is not doing what we want. 125 00:07:08,430 --> 00:07:09,120 OK. 126 00:07:09,290 --> 00:07:11,600 So where are we going from here. 127 00:07:11,600 --> 00:07:16,660 So I know that I can parse this side and I know I can console log that. 128 00:07:17,240 --> 00:07:25,430 So why don't I start filtering something regarding whatever data I have with that. 129 00:07:25,640 --> 00:07:33,020 So use decided to filter my state and then depending on which button is click then my state is going 130 00:07:33,020 --> 00:07:36,500 to be different values how this is gonna work. 131 00:07:36,500 --> 00:07:43,070 Well we have the book data each of them have the 80s and I definitely have it here anyway so why don't 132 00:07:43,070 --> 00:07:44,990 we write the filter method. 133 00:07:44,990 --> 00:07:47,100 So how the filter method is going to work. 134 00:07:47,240 --> 00:07:49,960 Well first of all we're going to come up with some kind of name. 135 00:07:50,060 --> 00:07:58,350 I believe we can say like sordid or something like that so let's read const sorted list. 136 00:07:58,350 --> 00:08:04,560 Now the way this is going to work is that I'm gonna grab data from the state something I said is that 137 00:08:05,010 --> 00:08:08,280 state and then I'm having books and you know what. 138 00:08:08,370 --> 00:08:09,800 Why don't we call this box. 139 00:08:09,840 --> 00:08:16,740 So sorted books and I can call the filter method on these books and I can filter out the rest of the 140 00:08:16,740 --> 00:08:19,530 books that don't have this I.D.. 141 00:08:19,560 --> 00:08:22,500 So what I'm gonna do essentially is the moment I'm going to click it. 142 00:08:22,530 --> 00:08:24,400 I'm going to say return me the list. 143 00:08:24,600 --> 00:08:28,120 That doesn't include this idea and then I'm gonna render that list. 144 00:08:28,130 --> 00:08:30,140 And that way we're gonna get rid of this book. 145 00:08:30,180 --> 00:08:35,590 So for a filter like I said the same as with the map we're passing the callback function. 146 00:08:35,610 --> 00:08:40,710 Now this callback function is actually going to be function that will go and execute for each and every 147 00:08:40,710 --> 00:08:42,960 item in our list. 148 00:08:42,960 --> 00:08:47,720 However in this case when I'm going to say that again I'm gonna be passing in some item. 149 00:08:47,760 --> 00:08:53,090 So this is gonna reference each and every item that I have here and I'm going to say hey listen item 150 00:08:53,670 --> 00:09:01,800 if your I.D. matches actually the 80 then return it or I'm sorry no then don't return. 151 00:09:01,800 --> 00:09:08,210 So the way we're going to write it like this if item I.D. is not equal to the 80. 152 00:09:08,310 --> 00:09:09,930 So what's gonna happen right now. 153 00:09:10,080 --> 00:09:16,490 All the books that don't have decided are gonna be returned don't believe me not see. 154 00:09:16,590 --> 00:09:18,150 And first of all you know what. 155 00:09:18,150 --> 00:09:25,500 Why don't we do the console log this way we can for sure say that console log then we're gonna have 156 00:09:25,540 --> 00:09:34,270 is that state looks so first all gonna see the box here as well as we're gonna see it once we actually 157 00:09:34,270 --> 00:09:37,430 sort them out and then we're gonna see this that's at State. 158 00:09:37,630 --> 00:09:40,240 So let me copy and paste the console log. 159 00:09:40,640 --> 00:09:44,380 It's gonna be right here and then the idea would be very simple. 160 00:09:44,440 --> 00:09:46,820 The moment I'm going to click on it. 161 00:09:47,410 --> 00:09:54,280 So the moment I'm going to click on the one I should be getting back the list that's not gonna have 162 00:09:54,520 --> 00:09:55,470 the number one. 163 00:09:55,520 --> 00:09:57,080 So how this is gonna work. 164 00:09:57,100 --> 00:09:57,730 Well let's see. 165 00:09:57,730 --> 00:10:03,730 Well first of all this is just gonna be a little bit annoying here with this actual warning but I think 166 00:10:03,730 --> 00:10:04,980 we can live with that. 167 00:10:05,020 --> 00:10:06,360 Let me click on this. 168 00:10:06,370 --> 00:10:07,910 What do you see right now. 169 00:10:07,930 --> 00:10:12,640 So first of all I'm seeing here that obviously the books are going to stay the same. 170 00:10:12,640 --> 00:10:15,740 Yeah of course I didn't call this that state. 171 00:10:15,970 --> 00:10:19,000 My apologies I should have been looking for shorter books. 172 00:10:19,000 --> 00:10:21,150 This is the issue I have for some reason. 173 00:10:21,160 --> 00:10:24,790 Yeah I'm calling this that state books and this state books of course. 174 00:10:24,790 --> 00:10:26,390 Both of them are going to be six. 175 00:10:26,410 --> 00:10:27,700 Why don't we do this. 176 00:10:27,700 --> 00:10:31,410 Why don't we look at these sort of books again one more time. 177 00:10:31,660 --> 00:10:37,340 The second shot then as I delete how many I do have. 178 00:10:37,420 --> 00:10:42,590 Well in this case it says well there is this sort of books is obviously this is a variable. 179 00:10:42,600 --> 00:10:43,560 Oh OK. 180 00:10:43,720 --> 00:10:44,710 I don't know what is happening. 181 00:10:44,710 --> 00:10:48,660 First time I made a mistake with this that said books no it what sort of books. 182 00:10:48,670 --> 00:10:49,210 OK. 183 00:10:49,210 --> 00:10:51,310 Third time hopefully is going to be charm. 184 00:10:51,400 --> 00:10:53,150 Again the idea is very simple. 185 00:10:53,150 --> 00:10:56,100 First I'm just console logging what is in a state. 186 00:10:56,380 --> 00:11:03,040 Then I'm gonna be filtering all the items basically that don't have the idea and then we'll see what 187 00:11:03,040 --> 00:11:04,120 we're going to have. 188 00:11:04,210 --> 00:11:08,350 And yes finally finally it worked. 189 00:11:08,380 --> 00:11:09,790 I'm really glad. 190 00:11:09,850 --> 00:11:12,400 So six items technically correct. 191 00:11:12,400 --> 00:11:12,640 Right. 192 00:11:13,030 --> 00:11:15,160 So six items was the initially hold the books. 193 00:11:15,610 --> 00:11:16,540 But then I have five. 194 00:11:17,080 --> 00:11:24,130 So what I did is I filter through the list and I said If your item I.D. which we're getting back from 195 00:11:24,130 --> 00:11:33,200 here all these I.D. if item your I.D. matches the I.D. that I'm passing in then I'm gonna remove it 196 00:11:33,680 --> 00:11:34,760 then this is not gonna be here. 197 00:11:35,170 --> 00:11:37,050 So that's how it does work. 198 00:11:37,060 --> 00:11:42,150 So now we have again six then we have five if I'm gonna click on one more time the number six is gonna 199 00:11:42,170 --> 00:11:42,720 be gone. 200 00:11:42,730 --> 00:11:48,790 So now we should be having again five or in this case I'm not having what the last one and one that 201 00:11:48,790 --> 00:11:53,770 has six because again in this case the one with the return and so on and so forth. 202 00:11:54,310 --> 00:11:57,910 So the way we're going to filter this is now with said state. 203 00:11:58,000 --> 00:12:04,330 So let me delete this and we can also maybe clear to console a little bit too much information here. 204 00:12:04,840 --> 00:12:06,440 And the way we're gonna do it like this. 205 00:12:06,460 --> 00:12:08,800 So now we know how we can use this that's at stake. 206 00:12:09,310 --> 00:12:14,740 So in this case what I'm looking for is I'm going to call this that's a state and I'm going to set my 207 00:12:14,740 --> 00:12:18,450 books books equal to the books. 208 00:12:18,550 --> 00:12:24,280 So at the moment I click on it I'm gonna have the new Array which is going to be returned and all the 209 00:12:24,280 --> 00:12:31,150 items that don't have the I.D. That's matching the head that I'm passing and then I'm going to set my 210 00:12:31,150 --> 00:12:32,500 list equal to that. 211 00:12:32,740 --> 00:12:37,840 So that way if I'm gonna click on this I'm gonna remove it of course kind of click on that one I'm going 212 00:12:37,840 --> 00:12:38,780 to remove it. 213 00:12:38,920 --> 00:12:45,610 And just to probably show you because you're tired of me talking about it why don't we do sort of books 214 00:12:46,370 --> 00:12:53,260 and yeah let's start out so we can maybe make the console a little bit smaller and let's say we want 215 00:12:53,260 --> 00:12:56,020 to get a room number one we don't have number one. 216 00:12:56,050 --> 00:12:56,560 And you know what. 217 00:12:56,560 --> 00:12:58,440 We don't need this state books. 218 00:12:58,460 --> 00:13:04,540 This is just annoying me service and I said the moment we're going to refresh it we're getting back 219 00:13:04,570 --> 00:13:06,730 a new fresh pair of data. 220 00:13:06,850 --> 00:13:09,120 So of course there's gonna be all six of them. 221 00:13:09,230 --> 00:13:13,200 However one is gone six is gone. 222 00:13:14,230 --> 00:13:16,130 Then this guy is gone. 223 00:13:16,240 --> 00:13:21,500 Then hopefully we can delay this one this one on this one again. 224 00:13:21,610 --> 00:13:27,670 I'm going to refresh it because all of them are going to come back and just to tell you the react doesn't 225 00:13:27,670 --> 00:13:28,530 care what you said. 226 00:13:28,540 --> 00:13:36,310 This year obviously it is in our interests if we know that this is the NRA that we are filtering this 227 00:13:36,370 --> 00:13:38,410 and we are setting the new All right here. 228 00:13:38,510 --> 00:13:42,860 Or I could have said something like this so this can be zero. 229 00:13:42,970 --> 00:13:47,140 Then I was like This is just gonna throw you a bunch of errors because this is not. 230 00:13:47,140 --> 00:13:50,140 It says well does not that books map is not a function. 231 00:13:50,140 --> 00:13:52,770 So we're running the map function on the state. 232 00:13:53,080 --> 00:13:54,290 So you need to be careful. 233 00:13:54,460 --> 00:13:59,350 So as you're setting the new item that you're going to be replacing you need to make sure that that 234 00:13:59,350 --> 00:14:05,020 is the same data structure and that you're just changing something which in our case we were getting 235 00:14:05,020 --> 00:14:12,370 a new array with all the items that don't have the same idea as we're passing down. 236 00:14:12,490 --> 00:14:19,210 So hopefully my few mistakes didn't really throw you off and yeah and this is how we can parse the methods 237 00:14:19,210 --> 00:14:20,460 down to the children. 238 00:14:20,620 --> 00:14:27,910 And this is why it's so powerful because these methods affect the state that you see right in the previous 239 00:14:27,910 --> 00:14:30,900 ones were affecting only the each and every item. 240 00:14:30,940 --> 00:14:36,880 Now you're talking you know big boy's game because now you can really change a lot of law and values. 241 00:14:37,300 --> 00:14:42,370 So yeah that's the beauty about passing down methods to a child component.