1 00:00:00,760 --> 00:00:05,620 As we mentioned in the last video rendering out a list of blog posts is great but eventually we probably 2 00:00:05,620 --> 00:00:09,450 want to add in or maybe even edit some given blog post. 3 00:00:09,460 --> 00:00:14,300 So in this video we're going to figure out how to somehow change the data inside of our blog provider. 4 00:00:14,300 --> 00:00:18,910 Any time we change the data inside of here we're going to want our entire application to re render and 5 00:00:18,910 --> 00:00:20,980 show that new source of data. 6 00:00:20,980 --> 00:00:26,240 Now anytime you hear the word cause our application to re render in the world of react. 7 00:00:26,350 --> 00:00:31,680 We are always even when we're dealing with context right here we are always talking about state. 8 00:00:31,690 --> 00:00:35,590 So when I start to say hey let's have some source of information that's going to change over time and 9 00:00:35,590 --> 00:00:38,210 whenever that data changes we want to re render our app. 10 00:00:38,350 --> 00:00:42,460 We are always talking about creating some kind of state variable. 11 00:00:42,460 --> 00:00:48,490 So here's the idea right now inside of our blog post provider we are passing down a static list a blog 12 00:00:48,490 --> 00:00:50,080 post to the index screen. 13 00:00:50,080 --> 00:00:55,480 Notice that inside of this diagram I abbreviated the react navigation stack Navy navigator right here 14 00:00:55,480 --> 00:01:01,210 just as essentially stuff and we're providing this information using the contact system. 15 00:01:01,210 --> 00:01:06,310 So in order to make sure that the index screen can somehow change that data we're going to initialize 16 00:01:06,370 --> 00:01:12,870 a piece of state inside of our blog post provider and we will call that piece of state simply blog posts. 17 00:01:13,000 --> 00:01:17,050 Then when we share some information from the blog post provider down to the index screen we're going 18 00:01:17,050 --> 00:01:21,670 to pass a single object that has a couple of different properties inside of it. 19 00:01:21,670 --> 00:01:23,250 The first property it's going to have. 20 00:01:23,260 --> 00:01:28,030 Well we will call data and data is going to be simply the array of blog post that we're currently working 21 00:01:28,030 --> 00:01:35,810 with then we will also pass in a second option here or second property that we will call add blog post. 22 00:01:35,810 --> 00:01:41,060 So this is essentially a callback function that we're gonna pass from the blog post provider down to 23 00:01:41,060 --> 00:01:42,590 our index screen. 24 00:01:42,740 --> 00:01:49,280 If the index screen every calls add blog post that's going to cause our blog post provider to randomly 25 00:01:49,280 --> 00:01:53,340 generate a new blog post add it to our list of blog posts. 26 00:01:53,360 --> 00:01:55,100 Remember that is a state variable. 27 00:01:55,220 --> 00:02:00,980 So when we add in a new blog post to that thing that's going to cause our blog post to re render. 28 00:02:00,980 --> 00:02:05,960 And that's gonna make our entire application re render in our index screen is going gonna get the brand 29 00:02:05,960 --> 00:02:11,800 new list of blog posts over this context channel so that's the general idea. 30 00:02:11,800 --> 00:02:15,660 So let's look back over to our code editor and start putting this thing together. 31 00:02:15,760 --> 00:02:16,210 All right. 32 00:02:16,210 --> 00:02:24,560 Inside of my blog context file I'm going to first begin by importing from react the use state helper. 33 00:02:24,630 --> 00:02:29,620 So remember that's a hook we can use it to add in a context variable to a component. 34 00:02:29,730 --> 00:02:34,740 So then inside a blog provider rather than generating this static list of blog posts right there I'm 35 00:02:34,740 --> 00:02:41,050 going to instead initialize a new state variable so I'll call this new state variable blog posts. 36 00:02:41,300 --> 00:02:49,620 I'll get the setter of set blog posts and then we will get that value from you state the default value 37 00:02:49,620 --> 00:02:50,420 of blog posts. 38 00:02:50,430 --> 00:02:54,810 So in other words when our application first starts up I want to have an empty array because by default 39 00:02:54,840 --> 00:02:56,880 we're not gonna have any blog posts whatsoever. 40 00:02:58,290 --> 00:03:00,570 Now there's just one little thing to be aware of here. 41 00:03:00,600 --> 00:03:05,220 I just said a moment ago that we're going to pass down a callback function called add blog post and 42 00:03:05,220 --> 00:03:09,660 whenever we call that we want to add in a new blog post to this state variable. 43 00:03:09,660 --> 00:03:15,290 But right now we've got a simple setter this setter completely updates this list right here completely 44 00:03:15,290 --> 00:03:16,580 it replaces that value. 45 00:03:16,590 --> 00:03:17,920 A hundred percent. 46 00:03:18,120 --> 00:03:22,830 So to make sure that we actually have a function called add blog posts we can pass down we're going 47 00:03:22,830 --> 00:03:26,220 to create a little helper function inside of our component. 48 00:03:26,220 --> 00:03:32,830 So right after we create our state variable I'm gonna make a new function called add blog posts. 49 00:03:32,910 --> 00:03:39,280 So the goal this function is to use our setter to add in a new blog post to our blog post variable. 50 00:03:39,450 --> 00:03:45,030 So to do so inside of here we're going to call set blog posts and we're gonna use a little bit of complicated 51 00:03:45,030 --> 00:03:48,440 syntax inside of here but you'll understand what's going on just fine. 52 00:03:48,510 --> 00:03:54,390 So inside of here I'm going to add in a new array remember and time that we want to update a state variable 53 00:03:54,690 --> 00:03:56,210 we're always going to call the setter. 54 00:03:56,250 --> 00:04:02,100 We're going to pass in the new value to use we're never going to modify the original value so in adding 55 00:04:02,100 --> 00:04:07,230 in a new array right here I'm essentially creating a brand new array from scratch and I'm not changing 56 00:04:07,470 --> 00:04:13,020 the original blog post variable then inside of here I'm going to take all the existing blog posts that 57 00:04:13,020 --> 00:04:17,130 we have and I'm going to add it into this new Array that I just created. 58 00:04:17,130 --> 00:04:24,760 I can do that by writing out dot dot dot blog posts so this code right here just by itself means create 59 00:04:24,760 --> 00:04:30,700 a new array and inside that new Array take all the current blog posts we have and add them into the 60 00:04:30,700 --> 00:04:31,190 new Array. 61 00:04:31,210 --> 00:04:31,900 That's it. 62 00:04:33,270 --> 00:04:39,280 Then after that I'm going to add in the new blog post that we want to add so I'll put in a new object 63 00:04:39,280 --> 00:04:39,890 right here. 64 00:04:39,910 --> 00:04:43,690 This is going to be the brand new blog post that we're adding in. 65 00:04:43,840 --> 00:04:49,750 I'm going to give it a title and we could give it a fixed title something it says like my blog post 66 00:04:50,260 --> 00:04:54,630 but it would be kind of nice if we had some kind of changing blog title Inside of here instead. 67 00:04:54,840 --> 00:05:00,850 So going to make the title out of a template string so I'll place my back ticks and I'll make the title 68 00:05:01,420 --> 00:05:09,320 blog post number and I want to print out the number of this new blog posts are kind of its index to 69 00:05:09,320 --> 00:05:14,180 do so I'll place my dollar sign curly braces and inside there I'll take a look at the current value 70 00:05:14,180 --> 00:05:15,030 of blog posts. 71 00:05:15,800 --> 00:05:17,110 So that's an array remember. 72 00:05:17,120 --> 00:05:21,320 So going to get the current number of blog posts we have and I'll just add one. 73 00:05:21,380 --> 00:05:27,020 So that should result in the title of blog post one then two then three then four and so on. 74 00:05:27,020 --> 00:05:33,130 So I'll do blog posts dot length plus loops length plus one. 75 00:05:33,140 --> 00:05:37,110 Like so so we've now got this callback function. 76 00:05:37,140 --> 00:05:42,470 Any time we invoke it we're gonna make a brand new Array will add in all of our current blog posts add 77 00:05:42,480 --> 00:05:47,590 in the new one that we just generated and we're going to use this overall array to update our state 78 00:05:47,590 --> 00:05:52,810 variable as soon as we update that state variable our component right here at the blog provider is going 79 00:05:52,810 --> 00:05:57,970 to re render because the blog provider is showing every other component inside our application. 80 00:05:57,970 --> 00:06:01,760 Our entire application is going to be updated when that happens. 81 00:06:01,780 --> 00:06:05,940 We're then going to pass down the new list of blog posts into our context. 82 00:06:06,070 --> 00:06:11,200 So that means that the new list of blog posts is going to flow down into our index screen the next screen 83 00:06:11,200 --> 00:06:17,020 is then going to get the updated list of blog posts and re render our flat list with those okay. 84 00:06:17,110 --> 00:06:18,720 So that's pretty much it. 85 00:06:18,720 --> 00:06:23,550 So last thing we have to do here is make sure that when we pass a value into this provider we have to 86 00:06:23,550 --> 00:06:29,490 make sure that we provide not only that list of blog posts but also this callback function as well so 87 00:06:29,490 --> 00:06:33,140 we need to essentially pass an object just like that right there. 88 00:06:33,210 --> 00:06:38,950 So to do so I'm going to update the value prop. I'm going to delete blog posts and I'm gonna put in 89 00:06:38,950 --> 00:06:40,030 an object like so. 90 00:06:40,030 --> 00:06:45,940 So as usual remember that means we're gonna have two sets of curly braces and I'll say data is blog 91 00:06:45,940 --> 00:06:53,760 posts and my ADD blog post function I'll pass under a property called add blog post and that's going 92 00:06:53,760 --> 00:06:55,320 to be the add blog post function. 93 00:06:55,320 --> 00:07:01,830 So add blog post and now as usual we have an identical key and value right here which means we can condense 94 00:07:01,830 --> 00:07:07,710 it down to just the one statement of ADD blog posts like so that's 1 percent equivalent to what we just 95 00:07:07,710 --> 00:07:09,390 had okay. 96 00:07:09,440 --> 00:07:13,930 Let's save this and that should pretty much be it on our contact site. 97 00:07:14,440 --> 00:07:19,930 So now we have this situation successfully setup our blog post provider is passing down an object that 98 00:07:19,930 --> 00:07:23,210 has our current list a blog posts and a way to change it. 99 00:07:23,310 --> 00:07:28,120 It's now the last thing we have to do is add some code into our index screen that's going to invoke 100 00:07:28,180 --> 00:07:32,190 the add blog post callback so we don't have anything for that just yet. 101 00:07:32,200 --> 00:07:33,440 So let's take a quick pause right here. 102 00:07:33,460 --> 00:07:38,140 When we come back the next video we're going to add in a button that the user can press any time the 103 00:07:38,140 --> 00:07:39,310 user presses that button. 104 00:07:39,370 --> 00:07:44,590 We're going to run add a blog post and that should kick off this entire series of interactions where 105 00:07:44,590 --> 00:07:48,610 we update our state to cause the component to re render get the new list of blog posts inside of index 106 00:07:48,610 --> 00:07:50,630 screen and then render them out. 107 00:07:50,650 --> 00:07:53,650 So as usual quick pause and I'll see you in just a minute.