1 00:00:02,600 --> 00:00:08,300 Now to delete the item which was pressed, I'll add a new function here in my app component, 2 00:00:08,480 --> 00:00:10,790 so a new function which I store in this constant 3 00:00:11,150 --> 00:00:13,750 and I'll name it remove goal handler 4 00:00:13,970 --> 00:00:20,180 and here I expect to get the goal ID as an input because this ID allows us to identify the item which 5 00:00:20,180 --> 00:00:22,280 we want to remove, as an alternative, 6 00:00:22,280 --> 00:00:26,620 we could also get the index in the array and then remove the item by index 7 00:00:26,630 --> 00:00:32,450 but I think the ID is even better because we have an ID clearly matched to every item, why wouldn't 8 00:00:32,450 --> 00:00:34,480 we use that for deleting it 9 00:00:34,750 --> 00:00:40,220 and now in here we can set our course goals because of course I want to update my course goals 10 00:00:40,220 --> 00:00:45,070 and again, we're making an update that's based on our current course goals, 11 00:00:45,080 --> 00:00:47,190 so I'll use that function form here, 12 00:00:47,240 --> 00:00:50,400 I pass a function, an anonymous function to set course goals. 13 00:00:50,510 --> 00:00:52,610 There I get my current state snapshot, 14 00:00:52,610 --> 00:00:57,890 my current course goals and in the function body, I have to return the updated course goals. 15 00:00:57,890 --> 00:01:04,490 Now in case you're wondering why I don't have curly braces up here, here I use the shorter syntax where 16 00:01:04,490 --> 00:01:06,860 I only have one expression which I want to return, 17 00:01:06,860 --> 00:01:10,500 so I omit the function body and the return statement. Here, 18 00:01:10,730 --> 00:01:15,380 I'll have a little bit of a longer statement, therefore I want to have the function body here for readability 19 00:01:15,860 --> 00:01:22,430 because in here, I'll return current goals filter because filter is a built-in method built into Javascript 20 00:01:22,730 --> 00:01:28,940 that allows us to return a new array, filter always yields a new array which is based on the old array 21 00:01:28,940 --> 00:01:32,800 on which you're calling it filtered by a certain criteria. 22 00:01:32,840 --> 00:01:39,260 Now the criteria is in the end passed with the help of a function which you pass to filter. This function 23 00:01:39,260 --> 00:01:45,540 which you pass to filter gets the goal because this function runs on every element on the array you're 24 00:01:45,540 --> 00:01:46,490 calling it, 25 00:01:46,490 --> 00:01:51,800 so in this case, it runs on every goal we have in the current goals array and therefore we get that 26 00:01:51,800 --> 00:01:52,220 goal 27 00:01:52,220 --> 00:01:57,890 it's currently running on and now we can return true if we want to keep that item or false if we want 28 00:01:57,890 --> 00:02:05,150 to drop it and we want to return true if the ID of the goal we're looking at is not equal to the goal 29 00:02:05,250 --> 00:02:09,560 ID we're getting as an argument because that's the ID of goal we want to delete, 30 00:02:09,710 --> 00:02:14,750 So we only want to keep items where these IDs do not match because if they do match, then that's the 31 00:02:14,750 --> 00:02:16,000 item we want to get rid of 32 00:02:16,070 --> 00:02:19,580 and therefore we of course want to drop it from our new array. 33 00:02:20,120 --> 00:02:25,820 So this is the filter logic for getting rid of an item and returning this here as our new state which 34 00:02:25,820 --> 00:02:27,620 is in the end set thereafter. 35 00:02:27,620 --> 00:02:35,810 Now we can connect remove handler to onDelete and now here we got two options or multiple options of 36 00:02:35,810 --> 00:02:36,760 doing this, 37 00:02:36,830 --> 00:02:42,200 we can simply point add remove goal handler but keep in mind that you need to pass the ID. So option 38 00:02:42,200 --> 00:02:50,710 number one is that you also forward the ID here to goal item by simply pointing at itemData.item.id 39 00:02:50,770 --> 00:02:57,760 because just as each item has a value, each item here also has an ID because we're adding 40 00:02:57,760 --> 00:03:03,260 an ID when we're adding an item up there and now since we pass the ID to the goal item and we pass 41 00:03:03,260 --> 00:03:09,280 the onDelete prop to the goal item, inside of the goal item, here where we call onDelete in the end 42 00:03:09,280 --> 00:03:14,320 or where we forward the handler onDelete points at to onPress, 43 00:03:14,320 --> 00:03:20,320 we could also bind this to set a default argument when this gets called and the default argument here 44 00:03:20,320 --> 00:03:25,900 would be props ID, so the ID we're also getting so that this ID is passed to onDelete when it's 45 00:03:25,900 --> 00:03:32,800 getting called upon a press. That's option number one and it's the option I will use but also to show you 46 00:03:32,800 --> 00:03:38,530 the other option, the other option would be that you don't pass the ID to goal item but instead here 47 00:03:38,530 --> 00:03:44,050 onDelete, you know in the end the remove goal handler will be executed and then here you could add 48 00:03:44,080 --> 00:03:50,590 bind this and then point that itemData.item.id, that would also work. 49 00:03:51,040 --> 00:03:56,280 Now I will revert this however and I will go with the approach where all the information is inside 50 00:03:56,290 --> 00:04:04,030 of the goal item and we do connect our function with the ID from inside the goal item. Now with that, we 51 00:04:04,030 --> 00:04:06,880 should have a setup where we can all delete our goals. 52 00:04:06,910 --> 00:04:13,780 So let's wait for this to reload and let's test it maybe here on iOS, we want to learn React Native and 53 00:04:13,840 --> 00:04:17,830 now I want to use different name, so that we can see if we deleted the right one. 54 00:04:17,830 --> 00:04:26,520 We want to learn it all, we want to maybe also get really good at React Native and whatever it is 55 00:04:26,980 --> 00:04:33,790 and now I will actually click on learn it all to delete that and that seems to work. Here, 56 00:04:34,060 --> 00:04:35,710 Learn React Native and now 57 00:04:35,710 --> 00:04:40,720 the last one. I'll delete it and also without any errors here, 58 00:04:40,750 --> 00:04:47,440 so this seems to work fine and with that, we're deleting items with the help of touchable, touchable opacity 59 00:04:47,440 --> 00:04:54,430 in this case which helps you register events, like onPress, on any component or on any components you 60 00:04:54,430 --> 00:04:54,700 need.