1 00:00:00,300 --> 00:00:04,530 In this video, let's implement the delete functionality. 2 00:00:04,770 --> 00:00:10,230 If you want to give yourself a challenge, you can post this video and then implement that. 3 00:00:10,350 --> 00:00:13,020 It all begins with an action. 4 00:00:13,410 --> 00:00:20,280 All right, so let's see how I'm going to solve this particular functionality for deleting unless we 5 00:00:20,280 --> 00:00:23,940 need an identifier that is the ID. 6 00:00:24,090 --> 00:00:29,610 So upon creating, we need to pass in what is called an object. 7 00:00:29,790 --> 00:00:35,970 So for this one, we're going to use an object and provide an ID. 8 00:00:36,180 --> 00:00:44,670 So the ID are going to take the state which is our to dos or let's make it more readable by providing 9 00:00:44,670 --> 00:00:45,750 what is called to do. 10 00:00:46,320 --> 00:00:50,540 So here we are going to move this one and as to dos. 11 00:00:50,580 --> 00:00:53,700 So here are going to be to dos dot length. 12 00:00:56,560 --> 00:00:58,540 To Duce Dodds LAMB. 13 00:01:01,530 --> 00:01:04,560 Because I don't want to have zero as an index. 14 00:01:04,560 --> 00:01:07,290 And here I'll pass in the title. 15 00:01:08,130 --> 00:01:08,790 Great. 16 00:01:08,970 --> 00:01:17,240 And I guess I'm error here because states is not defined on line number 31 which is this one. 17 00:01:17,250 --> 00:01:24,300 So now is to dos and also as to dos. 18 00:01:24,690 --> 00:01:25,740 All right. 19 00:01:25,740 --> 00:01:28,410 So now it is happy. 20 00:01:28,560 --> 00:01:33,570 So let's go ahead and then trash our local storage data. 21 00:01:34,170 --> 00:01:41,800 So let's refresh it and application to do trash and then click on this one to refresh. 22 00:01:41,820 --> 00:01:44,370 Now everything is back. 23 00:01:44,640 --> 00:01:45,420 All right. 24 00:01:45,420 --> 00:01:50,460 So here, let's add let's say again 25 00:01:53,430 --> 00:01:55,350 where we've got some error here. 26 00:01:55,380 --> 00:01:57,470 Let's check the console. 27 00:01:57,480 --> 00:02:03,990 And the problem is, the way we are looping through this time around, it is an object. 28 00:02:04,020 --> 00:02:12,690 Do you remember so here the way to make use of to do that ID and then the title going to be as to do 29 00:02:12,690 --> 00:02:13,920 the title. 30 00:02:14,130 --> 00:02:18,120 Let's save it and let's refresh it and it back. 31 00:02:18,150 --> 00:02:26,950 Now let's see where we don't have the result here, but let's check our application here and it's empty. 32 00:02:26,970 --> 00:02:30,230 So let's refresh it and let's add any data here. 33 00:02:30,240 --> 00:02:32,400 And it is back. 34 00:02:32,430 --> 00:02:37,680 You can see that we have an object with key value per. 35 00:02:37,860 --> 00:02:41,550 So let's implement what is called deleting. 36 00:02:41,700 --> 00:02:48,150 So back to our contexts, you are going to create an action called delete. 37 00:02:48,360 --> 00:02:50,150 So this one is for ADD. 38 00:02:50,160 --> 00:02:54,600 Let me collapse it and then this one going to be as remove. 39 00:02:54,720 --> 00:02:57,570 So here I'm going to be the action. 40 00:02:58,890 --> 00:03:04,230 So const remove to do. 41 00:03:06,440 --> 00:03:10,510 Because for this we need the ID of the to do so. 42 00:03:10,520 --> 00:03:23,600 Here we are waiting to dispatch an action with a type or remove to do great and for this remove into 43 00:03:23,600 --> 00:03:33,380 sign the I.D. so that our reducer can take that ID and then remove from the original data. 44 00:03:33,500 --> 00:03:39,350 So here, let's pass in as a value to the value. 45 00:03:40,280 --> 00:03:41,210 So here you go. 46 00:03:41,210 --> 00:03:43,730 Remove to do action. 47 00:03:43,910 --> 00:03:48,200 So now let's handle this one inside our reducer. 48 00:03:48,470 --> 00:03:57,700 So most at times we use what is called switch statement than using the statement. 49 00:03:57,710 --> 00:04:00,970 So let's follow the convention. 50 00:04:00,980 --> 00:04:05,540 So instead of if statements, we are going to use the switch statement. 51 00:04:05,550 --> 00:04:17,450 So let's remove that and here we go for switch, we bring in the switch and then here we pass in the 52 00:04:17,450 --> 00:04:19,519 action dot type. 53 00:04:20,209 --> 00:04:32,150 So if the action door type is equal to that is the case is equal to add to do, then colon, we are 54 00:04:32,150 --> 00:04:35,030 going to retain new states. 55 00:04:35,090 --> 00:04:38,840 And then you're going to spread the original state here. 56 00:04:38,840 --> 00:04:42,530 And then we add our action dot payload. 57 00:04:42,890 --> 00:04:49,340 And for the action to we can do structure from here as my action. 58 00:04:49,670 --> 00:04:59,000 And inside this I have access to the action type and then the payload is equal to the action. 59 00:04:59,300 --> 00:05:08,330 In that way I can reference the payload without using the action and this one as that is the same. 60 00:05:08,450 --> 00:05:13,700 So with this changes, let's try and add new to do and see. 61 00:05:13,700 --> 00:05:16,040 Now everything is working. 62 00:05:16,280 --> 00:05:20,080 So let's also handle the delete. 63 00:05:20,090 --> 00:05:21,860 So here we go. 64 00:05:22,100 --> 00:05:30,910 We are going to handle a case called remove to do as we move, and that's called to do. 65 00:05:31,340 --> 00:05:39,440 If that is the case, we are going to retain the entire state, then we filter out. 66 00:05:39,470 --> 00:05:44,120 Then here we have access to the individual to do so. 67 00:05:44,120 --> 00:05:47,270 Here if the to do dot id. 68 00:05:47,300 --> 00:05:55,220 So if it is not equal to the action, the payload which is the payload and that is the ID, then we 69 00:05:55,220 --> 00:05:58,040 are going to retain a new array. 70 00:05:58,340 --> 00:06:06,920 So for a switch we need to provide a default value then going to return the original state, meaning 71 00:06:06,920 --> 00:06:13,490 that if there is no action being triggered, we need to return the initial state. 72 00:06:13,520 --> 00:06:19,550 Remember, as soon as our application gets rendered, this function is going to be called. 73 00:06:19,550 --> 00:06:25,400 So if we don't retain the original data, we are going to have some box. 74 00:06:25,400 --> 00:06:29,840 So with this one, let's save it and let's go to to do list here. 75 00:06:30,050 --> 00:06:34,100 And then for this one, I have access to my remove to do. 76 00:06:34,100 --> 00:06:37,460 And then on the button let's add on click. 77 00:06:41,910 --> 00:06:42,900 And here. 78 00:06:42,930 --> 00:06:45,690 How can I get an ID from that? 79 00:06:45,720 --> 00:06:50,340 It's from To-Do dot ID to do dot ID. 80 00:06:50,340 --> 00:06:51,990 And that is it. 81 00:06:52,020 --> 00:06:53,910 Moment of truth. 82 00:06:54,030 --> 00:06:56,760 Let's refresh it and let me click on this one. 83 00:06:56,790 --> 00:06:58,320 Aye, aye. 84 00:06:58,320 --> 00:07:02,570 I can add more and I can remove. 85 00:07:02,580 --> 00:07:05,210 And that is it, guys. 86 00:07:05,220 --> 00:07:10,290 So if we want to remove the title upon submitting, we're going to be pretty simple. 87 00:07:10,380 --> 00:07:12,390 Let's go to the ad to do. 88 00:07:12,630 --> 00:07:22,740 And after submitting, we want to empty the title that is set title to empty string. 89 00:07:23,010 --> 00:07:24,360 So let's save it. 90 00:07:24,360 --> 00:07:26,580 And now let's add anything here. 91 00:07:26,580 --> 00:07:28,740 And now it has been cleared. 92 00:07:28,920 --> 00:07:32,940 So what about to avoid adding empty data here? 93 00:07:32,940 --> 00:07:35,490 I can see that I'm adding empty data here. 94 00:07:35,580 --> 00:07:40,440 We can check that using the if statement and then the left. 95 00:07:40,440 --> 00:07:50,220 So here, if title is equal to empty string, then let's collect and say that place. 96 00:07:52,120 --> 00:07:53,140 Our data. 97 00:07:54,250 --> 00:07:56,620 So this one, let's have it. 98 00:07:56,620 --> 00:07:59,030 And now let's refresh. 99 00:07:59,050 --> 00:08:00,400 Let's add this. 100 00:08:00,620 --> 00:08:03,100 All right, before that, let's remove everything. 101 00:08:05,490 --> 00:08:06,030 Yeah. 102 00:08:06,030 --> 00:08:10,590 Add it and now we can see that after adding or clicking okay. 103 00:08:10,590 --> 00:08:17,580 Is to add to avoid that list return from here as return. 104 00:08:17,730 --> 00:08:25,150 So here, if I refresh it, let's remove this one and then provide empty and okay. 105 00:08:25,200 --> 00:08:30,060 We see that nothing being added but if I add a value is being added. 106 00:08:30,060 --> 00:08:32,730 Well, there's something wrong with my cells. 107 00:08:32,730 --> 00:08:37,169 But don't worry, the most important part is the actual logic. 108 00:08:37,530 --> 00:08:46,530 So guys here and the section on the context API and the use reducing, we have a big project where we 109 00:08:46,530 --> 00:08:54,150 are going to make use of this one to build real world authentication application and income and expenses 110 00:08:54,150 --> 00:09:00,390 tracker application to improve our knowledge when it comes to context API.