1 00:00:00,330 --> 00:00:05,820 And once we can clear the whole list, now it's up the functionality where we can remove individual 2 00:00:05,820 --> 00:00:07,720 items from the list. 3 00:00:08,130 --> 00:00:12,280 We'll start with our function soon here in one seconds. 4 00:00:12,330 --> 00:00:15,990 And I'll call this a remove item item. 5 00:00:16,260 --> 00:00:20,280 It is going to be looking for the I.D., so we'll have to pass it in. 6 00:00:20,700 --> 00:00:23,910 And of course, that is going to happen in the actual item. 7 00:00:24,270 --> 00:00:32,400 And then once we've got the ID, then I just need to set my list of the new values and also show the 8 00:00:32,400 --> 00:00:32,800 alert. 9 00:00:32,820 --> 00:00:35,810 I'll start with an alert because she's going to be faster. 10 00:00:35,820 --> 00:00:44,260 We're going to go with Sroufe or Show and Danger since we're removing the item and I'll say I'm removed. 11 00:00:44,460 --> 00:00:46,780 OK, beautiful online. 12 00:00:46,800 --> 00:00:54,690 I also want to set my list to the new value now in this case, again, just so we can keep on practicing 13 00:00:54,990 --> 00:00:59,370 our right away part in my value that is coming from the filter. 14 00:00:59,650 --> 00:01:02,740 I'm going to go with list filter that will always return. 15 00:01:02,740 --> 00:01:03,270 And you. 16 00:01:03,390 --> 00:01:03,830 All right. 17 00:01:04,080 --> 00:01:11,370 And I'm just going to say, if the item I.D. matches to whatever ID passed in to remove item one, please 18 00:01:11,370 --> 00:01:15,670 don't return it from this filter function server. 19 00:01:15,960 --> 00:01:21,870 If item I.D. does not match, then yes, that is going to be added to my new ORAY. 20 00:01:22,050 --> 00:01:24,540 If it does match that it won't get returned. 21 00:01:24,840 --> 00:01:27,990 So of course then it won't be displayed. 22 00:01:28,290 --> 00:01:30,030 So now of course we have our remove item. 23 00:01:30,600 --> 00:01:33,380 We just need to pass it into our list of course. 24 00:01:33,390 --> 00:01:39,030 So we're going to say remove item is equal to the remove item function. 25 00:01:39,240 --> 00:01:45,810 So we have remove item Propp equals the remove item portion that unless we write away from the structure, 26 00:01:46,110 --> 00:01:50,010 remove item function and that where we have the button. 27 00:01:50,990 --> 00:01:58,700 Not the added one, but the elite can just go on click and I need to set up one function, of course, 28 00:01:59,150 --> 00:02:02,680 and I'll say remove item and then I'll pass in the area. 29 00:02:02,840 --> 00:02:07,080 And of course, I read the structured diary, so I just pass in the area. 30 00:02:07,460 --> 00:02:13,580 So let's type some gibberish one, then two, then three. 31 00:02:14,070 --> 00:02:20,460 And eventually we can remove the item click and I remove the item click and I remove the item. 32 00:02:20,870 --> 00:02:28,900 Now, while we're still on the subject, you probably noticed this bug where essentially once I add 33 00:02:28,910 --> 00:02:34,490 the item or once I remove after just three seconds, the alert goes away. 34 00:02:34,760 --> 00:02:36,350 Now, why is that a bad thing? 35 00:02:36,380 --> 00:02:40,040 Well, that's a refresh of the item that I'm going to counter to. 36 00:02:40,050 --> 00:02:46,430 You want to and then I click now, empty list is only displayed for like one second or whatever. 37 00:02:46,440 --> 00:02:52,730 And of course, the reason why is not happening, because if we check the alert, we can see that I 38 00:02:52,730 --> 00:03:00,060 invoke my set time and every time the component renders correct so on the initial render. 39 00:03:00,470 --> 00:03:03,740 So the problem is that initially, yes, we added. 40 00:03:03,770 --> 00:03:06,140 So now the component is already rendered. 41 00:03:06,170 --> 00:03:11,020 So when we clear items, technically, it is still in a process. 42 00:03:11,030 --> 00:03:14,660 So at the end it just removes it within the three seconds are up. 43 00:03:14,990 --> 00:03:22,880 So it would be nice if we would run this one every time there are some updates to the list. 44 00:03:23,180 --> 00:03:28,550 So for example, I had the item and then for three seconds this one is displayed and once I remove the 45 00:03:28,550 --> 00:03:36,060 item again, I still have those three seconds where the alert for a removal also is displayed. 46 00:03:36,470 --> 00:03:41,290 So what we do in the app, we also pass in the list. 47 00:03:41,630 --> 00:03:46,070 So I'll name this list that is equal to my list state value. 48 00:03:46,370 --> 00:03:54,430 And in the alert I'm going to structure it once a list and then I'll add it to my dependency. 49 00:03:54,620 --> 00:03:55,060 All right. 50 00:03:55,460 --> 00:04:02,770 So every time it is going to change, I'll get a new set of time up. 51 00:04:03,080 --> 00:04:09,800 So if I have this one, OK, notice now it's it's here and then once I click now it's going to sit for 52 00:04:09,950 --> 00:04:10,670 three seconds. 53 00:04:11,000 --> 00:04:12,160 Let's try one more time. 54 00:04:12,260 --> 00:04:13,520 Can I add gibberish. 55 00:04:13,520 --> 00:04:17,860 I wait a little bit and once I click, Noris will still wait for three seconds. 56 00:04:18,200 --> 00:04:23,820 Not a big deal, but in my opinion it's just a better user experience. 57 00:04:23,840 --> 00:04:30,230 Again, the only thing we do is just add a list to our dependency array. 58 00:04:30,590 --> 00:04:36,980 So, of course, once something changes on the list, we clear out the old I'm not, I'm not. 59 00:04:36,980 --> 00:04:38,180 And we set up a new one. 60 00:04:38,450 --> 00:04:40,220 That's the whole logic behind it.