In this video we're gonna make sure that tapping on this trash icon deletes a blog post.
This is going to be a really good exercise because we're going to understand the entire process of updating
a context and understand how we can add in some additional way that we can change the data stored inside
of it.
Now to get started the first thing I think we should do is add in a new property to every blog post
that gets created.
Remember right now we are creating our blog post inside of our blog reducer specifically in the case.
Add blog post I think that when we make a blog post we should add in an I.D. property we can then use
this I.D. to figure out exactly what blog post a user is trying to delete.
So inside of case add blog post right here.
I'll find the post that we're generating.
There it is right there.
I'm going to give it an I.D. property and I'll randomly generate the I.D. so to do so I'll call math
dot random times 9 9 9 9 9 like so and then I'll take the math dot floor of that entire operation like
so it's going to save this.
And when I do my code is going to jump again that's just my code for matter everything you see it's
still 100 percent equivalent to what I had before.
So now that we have this idea property in here we will always know exactly what blog post we are trying
to delete.
I want to mention that there is a very small chance of us getting a duplicate I.D. but for the purposes
of this application we probably don't have to worry about it too much OK.
So now we've got the I.D. property we're gonna go back to our index screen dot J.S. file inside of here.
I just want to point out that inside of our render item function this item which is actually a blog
post is now going to have a I.D. property tied to it.
I mean it very quickly just print out that I.D. after our title so I'll say I'll put a dash in there
and then my red curly braces and item dot I.D. like so.
So I want to make sure that I'm properly generating an I.D. so I'll add post and yep there we go.
So I've now got some consistent identifier for every blog post that I create.
Now we need to make sure that any time we tap on that feather icon we can run some code that's going
to somehow delete the given blog post.
So first things first we need to first make sure that we can detect a tap on a given trash icon to do
so.
We're going to import that touchable opacity element from react native.
Remember we can use that touchable opacity element to turn anything into some element that's going to
respond to a tap.
So at the very top from react native I'm going to import touchable opacity I'll then go back down to
where I show my feather icon and I'll wrap that feather icon with my touchable opacity
and then on the touchable opacity I'll add on the on press prop and then inside there for right now
I'll add in an arrow function that's just gonna do a console log of the items I.D..
So right now we'll just use that to make sure that we can call this function with the idea of the item
or the blog post we're trying to delete.
So I going to say this once again put back over add in some posts I'm going to try to delete one.
You'll notice I get that neat little fade out effect telling you that I just press that element and
it looks like I'm trying to delete 20 1 8 6 7.
So if I now go back over to my journal I should see a console log of 21 8 6 7.
Perfect.
OK.
So we've now essentially got one half of this entire process wired up.
We know exactly what blog posts we are trying to delete.
So let's not take a quick pause and then come back the next video we're gonna take care of the other
half of this problem which is to add in some code into our blog context and make sure that we have some
additional case that we'll search through our list of blog posts and delete the appropriate one.
So a quick pause and I'll see you in just a minute.