1 00:00:08,000 --> 00:00:15,770 And we're going to trade today is the first part of our lesson about the Kurds, how to remove a product 2 00:00:15,780 --> 00:00:22,850 from Todd's voice and let us make sure our records are records ease. 3 00:00:24,260 --> 00:00:32,960 Just hear our enemies and we are going to create a new function that that's Reglan to remove the call 4 00:00:32,970 --> 00:00:35,310 from cards removed from cards. 5 00:00:35,600 --> 00:00:36,620 This is our difference. 6 00:00:36,620 --> 00:00:46,370 Perhaps we have image, the pros and cons, our different props, and we are going to create a new purpose 7 00:00:46,370 --> 00:00:55,750 that's going name, remove that Facebook, create the new function just after it's called Hindry function. 8 00:00:57,050 --> 00:01:09,860 We're going to say and we're going to say remove that this remove from cards handler. 9 00:01:13,080 --> 00:01:15,270 Easy to do this. 10 00:01:16,200 --> 00:01:28,140 OK, what's regnant soon and it will be anything we can to say they call like this or is it something 11 00:01:28,140 --> 00:01:29,300 is important here? 12 00:01:30,960 --> 00:01:34,350 They call no, we don't need it. 13 00:01:47,570 --> 00:01:54,200 It's really an error function that is OK and what's required. 14 00:01:54,530 --> 00:01:57,170 Let us make it clear the like. 15 00:01:58,190 --> 00:02:13,100 And here we're going to use our story template litterers and we're going to say you want to remove like 16 00:02:13,330 --> 00:02:14,210 ports like this. 17 00:02:14,860 --> 00:02:23,210 You Dorasan, they call, they want to remove, they call nodes brains. 18 00:02:23,390 --> 00:02:28,130 That is, you want to remove the cartloads brains. 19 00:02:28,910 --> 00:02:37,270 This is a cancer like and it does take or just cause, which is a here Grayden. 20 00:02:38,690 --> 00:02:41,930 And that is a very good. 21 00:02:44,460 --> 00:02:52,860 Sharett, take that remove from car Tendler, I'm going to copy dysfunction and I'm going to create 22 00:02:52,860 --> 00:02:58,170 a props, a props that I'm going to name remove from cart. 23 00:02:59,310 --> 00:03:00,330 We have AIDS. 24 00:03:01,140 --> 00:03:03,030 Where are we going to put these props. 25 00:03:03,030 --> 00:03:11,040 We're going to put it in our Ricard's components, OK, because the spots on here in which recalculates 26 00:03:11,040 --> 00:03:13,230 is Endicott's elements. 27 00:03:13,230 --> 00:03:14,550 Endecott components. 28 00:03:16,980 --> 00:03:18,060 It does come here. 29 00:03:18,440 --> 00:03:20,370 We're going to say remove from cuts. 30 00:03:20,370 --> 00:03:22,020 I'm gonna remove this handler. 31 00:03:22,050 --> 00:03:23,550 You can put this same thing. 32 00:03:23,730 --> 00:03:30,600 He no problem that this is these dots are removed from Cassandre. 33 00:03:37,600 --> 00:03:44,560 OK, so let us take this perhaps copy, and so we're going to test to see the interaction that's required 34 00:03:44,590 --> 00:03:51,640 here between the cross about Centier, the remove button is red button and a great function which is 35 00:03:51,640 --> 00:03:53,360 removed from concentrate. 36 00:03:53,470 --> 00:03:55,720 We are going to test the interactivity. 37 00:03:56,140 --> 00:03:57,430 So let us come in. 38 00:03:57,430 --> 00:04:03,210 Our cockroaches come here and we have our button in which we have discoursing. 39 00:04:03,520 --> 00:04:11,020 We are going to directly put our props by saying, for example, creating a props that's going to remove 40 00:04:11,020 --> 00:04:11,700 from cards. 41 00:04:12,280 --> 00:04:19,090 And here we are going to call our props by saying props, darts, remove some cards. 42 00:04:19,330 --> 00:04:25,480 And here, do not forget, you need to put your parameter because you must have the specific elements. 43 00:04:25,930 --> 00:04:38,400 OK, so what's required to the first thing is to make your AURIN let us come here first are the address 44 00:04:38,470 --> 00:04:42,910 in which we have here these thoughts and directly here. 45 00:04:42,910 --> 00:04:49,600 We can take these properties like these objects in order to get all properties of color. 46 00:04:49,840 --> 00:04:56,170 And do not forget, declare your inner function like this is very good. 47 00:04:56,530 --> 00:04:58,600 We have it here and here. 48 00:04:58,600 --> 00:05:05,540 We are going to put our parameter in which they call like this in order to get all properties. 49 00:05:05,740 --> 00:05:14,010 And here we are going to call this and we're going to call these props in a rate cut to the chase. 50 00:05:14,950 --> 00:05:15,510 Yes. 51 00:05:15,820 --> 00:05:20,730 So remove this props, remove from cuts the records. 52 00:05:20,980 --> 00:05:25,990 And we are going to take these props and we are going to bring these props in the red component, which 53 00:05:25,990 --> 00:05:27,370 is the chase. 54 00:05:27,850 --> 00:05:31,390 And you can see we we are going to use the unclick. 55 00:05:31,630 --> 00:05:39,550 And here we have already put it to cards, OK, because we are using the only the only one component, 56 00:05:39,550 --> 00:05:40,410 which is Butson. 57 00:05:40,810 --> 00:05:48,370 So how to solve this problem or you need to remove it cards and replace remove from cards and then the 58 00:05:48,700 --> 00:05:51,450 cut cut on will not work again. 59 00:05:51,850 --> 00:05:59,850 So in order to avoid this problem, to make this dynamic so make sure also to create a standard props 60 00:05:59,860 --> 00:06:01,680 about the unclick button. 61 00:06:02,050 --> 00:06:04,660 So let us make Facebook what I want to say. 62 00:06:04,870 --> 00:06:11,440 Instead of saying intercuts, I'm going to say click, OK, it will be a standard and I'm going to copy 63 00:06:11,590 --> 00:06:18,160 and I'm going to come also in my card, which is instead of to create a props we've removed from cards, 64 00:06:18,280 --> 00:06:22,810 which calls the remove from parts props, I'm going to say click, OK. 65 00:06:23,500 --> 00:06:32,200 And here I'm going to take this same and a props and bring these props in our bottom doges components 66 00:06:32,200 --> 00:06:32,500 here. 67 00:06:33,220 --> 00:06:35,290 I'm going to say props dot click. 68 00:06:35,530 --> 00:06:42,520 And once you you are, for example, in this part, it will understand that this click means add to 69 00:06:42,520 --> 00:06:42,880 cart. 70 00:06:43,180 --> 00:06:50,520 But if it if it comes from yes, it will understand that these cliques mean remove from cards. 71 00:06:50,830 --> 00:06:55,110 OK, so you need to put this when you call your components Budson. 72 00:06:55,270 --> 00:07:02,140 OK, in the other side here in Hamdard Chess you don't have to put cleek, you can put if you want, 73 00:07:02,350 --> 00:07:04,150 but it is not necessary. 74 00:07:04,330 --> 00:07:12,160 But you need to put a standard called a standard props where we call the real component. 75 00:07:12,160 --> 00:07:17,140 When you call your components, which is for example, in this case Bouchon, in which we're going to 76 00:07:17,140 --> 00:07:21,280 click and react, and in this case we are going to solve this problem. 77 00:07:21,550 --> 00:07:28,930 And let us Big Brother, let us click on inspect, click on console. 78 00:07:29,620 --> 00:07:39,130 And here you're going to click on Nisan like this and no, not intercuts. 79 00:07:39,130 --> 00:07:46,600 Please not educate, but every move I have clicked on click on Remove. 80 00:07:46,840 --> 00:07:48,580 You want to remove Toyota. 81 00:07:48,880 --> 00:07:51,610 OK, we have Mercedez I think. 82 00:07:51,760 --> 00:07:52,330 Click on it. 83 00:07:52,990 --> 00:07:55,000 You want to remove Nissan. 84 00:07:55,150 --> 00:07:57,310 OK, where's Mercedez. 85 00:07:57,310 --> 00:07:58,420 This is Mercedez. 86 00:07:58,420 --> 00:07:59,380 Click on Mercedez. 87 00:08:00,220 --> 00:08:00,820 Click here. 88 00:08:01,060 --> 00:08:02,870 You want to remove Mercilus. 89 00:08:02,890 --> 00:08:11,830 OK, and we see that we have interaction between already bots on our remove button and our remove from 90 00:08:11,830 --> 00:08:12,700 cart function. 91 00:08:12,850 --> 00:08:16,800 So let us come in our a Honda chest. 92 00:08:16,810 --> 00:08:24,610 So the thing we're going to do is to uh to delete, OK, to remove the records. 93 00:08:25,270 --> 00:08:33,940 So I think that, you know, I can't even Giorgis and I'm going to come here and run and say I'm going 94 00:08:33,940 --> 00:08:36,080 to create a new constants in order to. 95 00:08:36,160 --> 00:08:39,790 With respect to immutability a condition. 96 00:08:39,980 --> 00:08:50,170 OK, because I can't relate directly, I can say I can't suppress, I can't say remove directly from 97 00:08:50,170 --> 00:08:59,530 my state these elements, OK, I need to make a copy and I'm going to mutate this copy to remove any 98 00:08:59,590 --> 00:09:00,100 copy. 99 00:09:00,250 --> 00:09:08,700 And Aden's I'm going to update's I'm going to take the third of this copy and assign this value in eight 100 00:09:08,860 --> 00:09:15,540 times, which is in our state and inside of the state state function in order to be updated. 101 00:09:16,000 --> 00:09:26,890 And I'm going to say carte items and I'm going to say and here I'm going to use this rate that is OK. 102 00:09:27,490 --> 00:09:38,130 And I'm gonna say these thoughts state dot items actis using the props, they separate, please. 103 00:09:38,140 --> 00:09:42,250 And I'm going to copy all in car items. 104 00:09:42,730 --> 00:09:48,490 So what I'm going to do and there this is different and this is the thing. 105 00:09:48,490 --> 00:09:49,870 And let us come up here. 106 00:09:49,870 --> 00:09:56,850 The first thing we're going to we're going to select is the index of the elements that we want to remove. 107 00:09:57,130 --> 00:10:01,450 So I'm going to declare a new contest. 108 00:10:01,450 --> 00:10:08,830 I'm going on an index and here I'm going to say these dots state. 109 00:10:10,080 --> 00:10:24,700 That's items the map and no map, but we are going to use the influence index, yes funds index in which 110 00:10:24,700 --> 00:10:31,860 we're going to have any function, that is his index. 111 00:10:37,260 --> 00:10:43,410 And here we are going to say in this. 112 00:10:44,940 --> 00:10:45,270 OK. 113 00:10:46,450 --> 00:10:54,030 That it is they call the shots. 114 00:10:54,700 --> 00:11:01,240 I think it's written this or etat, that is. 115 00:11:02,900 --> 00:11:10,760 OK, the index is a science value, but neither you can tell is a sign there, but there you use it. 116 00:11:11,780 --> 00:11:14,450 Yes, and we are going to take this index here. 117 00:11:15,110 --> 00:11:16,840 We're going to copy these costings. 118 00:11:17,300 --> 00:11:25,400 So the thing we're going to do is to record items and we're going to say splice lattes. 119 00:11:25,790 --> 00:11:33,560 And inside of our splice, the first thing we're gonna put is to put the index into the number of elements 120 00:11:33,560 --> 00:11:35,710 that we want to show remorse. 121 00:11:36,230 --> 00:11:45,020 And I feel that we are going to access in our results the set a state function in which we're going 122 00:11:45,020 --> 00:11:49,400 to put the items here. 123 00:11:49,400 --> 00:11:51,620 We're going to update our state's. 124 00:11:53,370 --> 00:11:54,760 OK, very good. 125 00:11:55,230 --> 00:12:04,710 So let us back here, click on this is the first song, any song, salsa, and if I click here, three 126 00:12:04,710 --> 00:12:05,100 chords. 127 00:12:10,750 --> 00:12:11,470 Click here. 128 00:12:11,830 --> 00:12:12,850 There, very good. 129 00:12:13,180 --> 00:12:13,430 Here. 130 00:12:13,600 --> 00:12:14,230 Very good. 131 00:12:14,260 --> 00:12:24,010 It works perfectly OK, and I think that we get finished with these parts and in the next video, we're 132 00:12:24,020 --> 00:12:32,410 going to see how we can display a kick or hide this from like display or hide this from.