Now to delete the item which was pressed, I'll add a new function here in my app component,
so a new function which I store in this constant
and I'll name it remove goal handler
and here I expect to get the goal ID as an input because this ID allows us to identify the item which
we want to remove, as an alternative,
we could also get the index in the array and then remove the item by index
but I think the ID is even better because we have an ID clearly matched to every item, why wouldn't
we use that for deleting it
and now in here we can set our course goals because of course I want to update my course goals
and again, we're making an update that's based on our current course goals,
so I'll use that function form here,
I pass a function, an anonymous function to set course goals.
There I get my current state snapshot,
my current course goals and in the function body, I have to return the updated course goals.
Now in case you're wondering why I don't have curly braces up here, here I use the shorter syntax where
I only have one expression which I want to return,
so I omit the function body and the return statement. Here,
I'll have a little bit of a longer statement, therefore I want to have the function body here for readability
because in here, I'll return current goals filter because filter is a built-in method built into Javascript
that allows us to return a new array, filter always yields a new array which is based on the old array
on which you're calling it filtered by a certain criteria.
Now the criteria is in the end passed with the help of a function which you pass to filter. This function
which you pass to filter gets the goal because this function runs on every element on the array you're
calling it,
so in this case, it runs on every goal we have in the current goals array and therefore we get that
goal
it's currently running on and now we can return true if we want to keep that item or false if we want
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
ID we're getting as an argument because that's the ID of goal we want to delete,
So we only want to keep items where these IDs do not match because if they do match, then that's the
item we want to get rid of
and therefore we of course want to drop it from our new array.
So this is the filter logic for getting rid of an item and returning this here as our new state which
is in the end set thereafter.
Now we can connect remove handler to onDelete and now here we got two options or multiple options of
doing this,
we can simply point add remove goal handler but keep in mind that you need to pass the ID. So option
number one is that you also forward the ID here to goal item by simply pointing at itemData.item.id
because just as each item has a value, each item here also has an ID because we're adding
an ID when we're adding an item up there and now since we pass the ID to the goal item and we pass
the onDelete prop to the goal item, inside of the goal item, here where we call onDelete in the end
or where we forward the handler onDelete points at to onPress,
we could also bind this to set a default argument when this gets called and the default argument here
would be props ID, so the ID we're also getting so that this ID is passed to onDelete when it's
getting called upon a press. That's option number one and it's the option I will use but also to show you
the other option, the other option would be that you don't pass the ID to goal item but instead here
onDelete, you know in the end the remove goal handler will be executed and then here you could add
bind this and then point that itemData.item.id, that would also work.
Now I will revert this however and I will go with the approach where all the information is inside
of the goal item and we do connect our function with the ID from inside the goal item. Now with that, we
should have a setup where we can all delete our goals.
So let's wait for this to reload and let's test it maybe here on iOS, we want to learn React Native and
now I want to use different name, so that we can see if we deleted the right one.
We want to learn it all, we want to maybe also get really good at React Native and whatever it is
and now I will actually click on learn it all to delete that and that seems to work. Here,
Learn React Native and now
the last one. I'll delete it and also without any errors here,
so this seems to work fine and with that, we're deleting items with the help of touchable, touchable opacity
in this case which helps you register events, like onPress, on any component or on any components you
need.