1 00:00:01,080 --> 00:00:01,350 All right. 2 00:00:01,380 --> 00:00:02,280 Let's continue on. 3 00:00:02,280 --> 00:00:05,130 So we now need to add in a button element to our next screen. 4 00:00:05,190 --> 00:00:09,150 And like we just said whenever user taps it we're gonna call that callback. 5 00:00:09,150 --> 00:00:11,550 So inside my index screen dot J.S. file. 6 00:00:11,550 --> 00:00:15,220 I'm going to find my import statement from React Native and I'm going to import. 7 00:00:15,270 --> 00:00:22,380 Button then right above my flight list I will place that button where the button I'll give it a title 8 00:00:22,440 --> 00:00:28,150 of ADD post and then for the on press callback well we'll add that in just a second. 9 00:00:28,180 --> 00:00:32,610 Let's first update the data that we get back from our context variable right here. 10 00:00:32,610 --> 00:00:38,000 So remember when we call use context that's gonna give us whatever information we added in to the value 11 00:00:38,000 --> 00:00:41,250 prop back inside of our blog post provider. 12 00:00:41,330 --> 00:00:45,710 So the information that we're now getting out of this used context call is no longer a array of blog 13 00:00:45,710 --> 00:00:46,410 posts. 14 00:00:46,430 --> 00:00:51,870 Instead it's going to be that object right there so we're going to use a little bit of D structuring 15 00:00:52,410 --> 00:00:59,420 to get our data property and the ADD blog post callback I'll then make sure that I pass in that data 16 00:00:59,420 --> 00:01:04,040 property to our flat list and replace what we are currently calling blog posts. 17 00:01:04,040 --> 00:01:09,050 So data is now going to be data like so that is our list of blog posts OK. 18 00:01:09,090 --> 00:01:13,290 So now on our button element now we can add on the on press callback. 19 00:01:13,290 --> 00:01:14,880 So this will be a function. 20 00:01:14,890 --> 00:01:20,290 Any time a user presses the button we're going to call add blog post. 21 00:01:20,320 --> 00:01:25,210 Now we are in another one of those scenarios here where we are essentially adding in an arrow function 22 00:01:25,240 --> 00:01:27,080 that just calls another function. 23 00:01:27,280 --> 00:01:31,930 So we can optionally choose to shorten this up and rather than creating this extra function here we 24 00:01:31,930 --> 00:01:36,890 can instead just pass a reference to the function that we want to be called anytime a user presses. 25 00:01:36,940 --> 00:01:42,820 So I could replace that with simply add blog post without any prints and no prints on there because 26 00:01:42,820 --> 00:01:48,690 we're just passing in a reference to the function to be called whenever a user presses that button okay. 27 00:01:48,700 --> 00:01:54,510 So let's now save this and we'll do a quick test so I'll flip back over and actually build a tap on 28 00:01:54,510 --> 00:01:59,550 that button and see blog post 1 2 3 4 5 and so on appear perfect. 29 00:01:59,660 --> 00:02:02,470 I'm going to flip over to Android and I'll do the same thing. 30 00:02:02,520 --> 00:02:04,770 Yep works over here as well. 31 00:02:04,770 --> 00:02:10,380 Now I know I've repeated what's going on here many times again I'm going to repeat it just once again. 32 00:02:10,410 --> 00:02:14,990 So what we've done here is added in a state variable to our blog post provider. 33 00:02:15,030 --> 00:02:19,620 Anytime that state variable changes our entire application is going to re render and we're going to 34 00:02:19,620 --> 00:02:25,710 pass down some new value from our provider down to all the different components that are connected to 35 00:02:25,710 --> 00:02:31,960 that provider so back inside of our blog context right here whenever we call add blog post we're gonna 36 00:02:31,990 --> 00:02:37,100 update our state variable that makes this component render and everything else we render as well. 37 00:02:37,510 --> 00:02:42,370 So we're gonna get the new list of blog posts we're gonna pass in that new list of blog post to our 38 00:02:42,370 --> 00:02:49,220 provider then inside of our index screen we're going to receive that new piece of data and pass in the 39 00:02:49,220 --> 00:02:54,610 new array of blog posts to our flat list the flat list is then going to update and show the new list 40 00:02:54,610 --> 00:02:56,810 a blog post to the user and that's it. 41 00:02:56,810 --> 00:02:58,580 That's the entire system. 42 00:02:58,580 --> 00:03:03,500 So what we have right here is a perfect example of how context is used. 43 00:03:03,510 --> 00:03:07,130 Now one thing want to clarify here really quickly because there is a lot of misinformation inside the 44 00:03:07,130 --> 00:03:13,790 community is that technically the context system is just the system of communicating information. 45 00:03:13,790 --> 00:03:17,060 A lot of people say hey let's use context to manage our state. 46 00:03:17,180 --> 00:03:21,980 We're not actually using context to manage states or data here we're using the context system to move 47 00:03:21,980 --> 00:03:23,870 information around. 48 00:03:23,870 --> 00:03:28,220 We're still managing our state using classic you state calls. 49 00:03:28,220 --> 00:03:32,840 So whenever people say to you hey let's manage our state with context or something like that it's not 50 00:03:32,840 --> 00:03:38,870 quite a statement that makes a lot of sense again context is just about moving information and it doesn't 51 00:03:38,870 --> 00:03:44,350 necessarily entirely replace a library like say redux or something like that. 52 00:03:44,560 --> 00:03:45,010 All right. 53 00:03:45,010 --> 00:03:50,290 So suffice it to say we now have a great example here of moving data around in cyber application and 54 00:03:50,290 --> 00:03:52,690 getting that data to update as well. 55 00:03:52,690 --> 00:03:56,200 Now even though this looks good there's still a couple of improvements we can make. 56 00:03:56,200 --> 00:03:58,580 So let's take a quick pause right here when we come back the next video. 57 00:03:58,660 --> 00:04:03,130 I want to point out one kind of awkward thing about the code that we've written out so far so quick 58 00:04:03,130 --> 00:04:04,650 pause and I'll see you in just a minute.