1 00:00:00,680 --> 00:00:04,820 In this video we're gonna make sure that tapping on this trash icon deletes a blog post. 2 00:00:04,820 --> 00:00:09,110 This is going to be a really good exercise because we're going to understand the entire process of updating 3 00:00:09,170 --> 00:00:14,480 a context and understand how we can add in some additional way that we can change the data stored inside 4 00:00:14,480 --> 00:00:15,500 of it. 5 00:00:15,510 --> 00:00:20,300 Now to get started the first thing I think we should do is add in a new property to every blog post 6 00:00:20,300 --> 00:00:21,550 that gets created. 7 00:00:21,590 --> 00:00:26,590 Remember right now we are creating our blog post inside of our blog reducer specifically in the case. 8 00:00:26,630 --> 00:00:32,960 Add blog post I think that when we make a blog post we should add in an I.D. property we can then use 9 00:00:32,960 --> 00:00:38,020 this I.D. to figure out exactly what blog post a user is trying to delete. 10 00:00:38,120 --> 00:00:40,070 So inside of case add blog post right here. 11 00:00:40,100 --> 00:00:42,140 I'll find the post that we're generating. 12 00:00:42,140 --> 00:00:43,430 There it is right there. 13 00:00:43,430 --> 00:00:49,370 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 14 00:00:49,460 --> 00:01:00,550 dot random times 9 9 9 9 9 like so and then I'll take the math dot floor of that entire operation like 15 00:01:00,560 --> 00:01:02,390 so it's going to save this. 16 00:01:02,410 --> 00:01:06,930 And when I do my code is going to jump again that's just my code for matter everything you see it's 17 00:01:06,970 --> 00:01:09,340 still 100 percent equivalent to what I had before. 18 00:01:10,070 --> 00:01:15,170 So now that we have this idea property in here we will always know exactly what blog post we are trying 19 00:01:15,170 --> 00:01:16,290 to delete. 20 00:01:16,400 --> 00:01:21,020 I want to mention that there is a very small chance of us getting a duplicate I.D. but for the purposes 21 00:01:21,020 --> 00:01:25,810 of this application we probably don't have to worry about it too much OK. 22 00:01:25,830 --> 00:01:32,240 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. 23 00:01:32,310 --> 00:01:37,170 I just want to point out that inside of our render item function this item which is actually a blog 24 00:01:37,170 --> 00:01:41,100 post is now going to have a I.D. property tied to it. 25 00:01:41,100 --> 00:01:46,530 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 26 00:01:47,010 --> 00:01:50,610 and then my red curly braces and item dot I.D. like so. 27 00:01:50,620 --> 00:01:56,440 So I want to make sure that I'm properly generating an I.D. so I'll add post and yep there we go. 28 00:01:56,440 --> 00:02:01,180 So I've now got some consistent identifier for every blog post that I create. 29 00:02:01,200 --> 00:02:05,760 Now we need to make sure that any time we tap on that feather icon we can run some code that's going 30 00:02:05,760 --> 00:02:08,700 to somehow delete the given blog post. 31 00:02:08,700 --> 00:02:14,670 So first things first we need to first make sure that we can detect a tap on a given trash icon to do 32 00:02:14,670 --> 00:02:14,900 so. 33 00:02:14,910 --> 00:02:19,590 We're going to import that touchable opacity element from react native. 34 00:02:19,590 --> 00:02:24,510 Remember we can use that touchable opacity element to turn anything into some element that's going to 35 00:02:24,510 --> 00:02:26,140 respond to a tap. 36 00:02:26,160 --> 00:02:34,490 So at the very top from react native I'm going to import touchable opacity I'll then go back down to 37 00:02:34,490 --> 00:02:41,910 where I show my feather icon and I'll wrap that feather icon with my touchable opacity 38 00:02:45,840 --> 00:02:51,150 and then on the touchable opacity I'll add on the on press prop and then inside there for right now 39 00:02:51,210 --> 00:02:56,850 I'll add in an arrow function that's just gonna do a console log of the items I.D.. 40 00:02:56,970 --> 00:03:01,440 So right now we'll just use that to make sure that we can call this function with the idea of the item 41 00:03:01,470 --> 00:03:03,770 or the blog post we're trying to delete. 42 00:03:03,770 --> 00:03:10,390 So I going to say this once again put back over add in some posts I'm going to try to delete one. 43 00:03:10,420 --> 00:03:14,650 You'll notice I get that neat little fade out effect telling you that I just press that element and 44 00:03:14,650 --> 00:03:17,510 it looks like I'm trying to delete 20 1 8 6 7. 45 00:03:17,530 --> 00:03:22,540 So if I now go back over to my journal I should see a console log of 21 8 6 7. 46 00:03:22,540 --> 00:03:23,570 Perfect. 47 00:03:23,650 --> 00:03:23,890 OK. 48 00:03:23,890 --> 00:03:26,970 So we've now essentially got one half of this entire process wired up. 49 00:03:27,040 --> 00:03:30,010 We know exactly what blog posts we are trying to delete. 50 00:03:30,160 --> 00:03:33,730 So let's not take a quick pause and then come back the next video we're gonna take care of the other 51 00:03:33,730 --> 00:03:38,680 half of this problem which is to add in some code into our blog context and make sure that we have some 52 00:03:38,740 --> 00:03:44,260 additional case that we'll search through our list of blog posts and delete the appropriate one. 53 00:03:44,340 --> 00:03:46,140 So a quick pause and I'll see you in just a minute.