1 00:00:01,110 --> 00:00:04,200 ‫Welcome back to the Far Away application 2 00:00:04,200 --> 00:00:07,320 ‫that we started building in the previous section. 3 00:00:07,320 --> 00:00:10,890 ‫And now, let's add some important state to the app 4 00:00:10,890 --> 00:00:13,623 ‫and then also, lift that state up. 5 00:00:15,060 --> 00:00:16,830 ‫But before we start doing that, 6 00:00:16,830 --> 00:00:18,930 ‫let's recap where we left off 7 00:00:18,930 --> 00:00:21,660 ‫at the end of the previous section. 8 00:00:21,660 --> 00:00:24,390 ‫So, remember how we made our form here 9 00:00:24,390 --> 00:00:26,940 ‫with these two controlled elements? 10 00:00:26,940 --> 00:00:28,650 ‫So, the state of these two elements 11 00:00:28,650 --> 00:00:31,680 ‫is controlled here inside the form component 12 00:00:31,680 --> 00:00:35,160 ‫with the description and the quantity state. 13 00:00:35,160 --> 00:00:37,980 ‫Then, whenever this form here is submitted, 14 00:00:37,980 --> 00:00:40,380 ‫the submit event will fire off. 15 00:00:40,380 --> 00:00:43,710 ‫And so then, we are handling that submit event here 16 00:00:43,710 --> 00:00:47,283 ‫using the onSubmit prop with the handleSubmit function. 17 00:00:48,420 --> 00:00:50,490 ‫So, this function right here. 18 00:00:50,490 --> 00:00:52,290 ‫Then, if there is a description, 19 00:00:52,290 --> 00:00:54,750 ‫we create this new item object 20 00:00:54,750 --> 00:00:57,903 ‫which, right now, we are only logging to the console. 21 00:00:59,880 --> 00:01:01,740 ‫So, let's try that. 22 00:01:01,740 --> 00:01:03,840 ‫And so you see, we got an object 23 00:01:03,840 --> 00:01:06,150 ‫with a description, the quantity, 24 00:01:06,150 --> 00:01:08,970 ‫the packed status set to false by default 25 00:01:08,970 --> 00:01:10,923 ‫and some random ID right here. 26 00:01:11,785 --> 00:01:12,720 ‫Now, okay? 27 00:01:12,720 --> 00:01:14,160 ‫But again, right now, 28 00:01:14,160 --> 00:01:17,370 ‫we are only logging this piece of information. 29 00:01:17,370 --> 00:01:20,190 ‫So, this new object here to the console. 30 00:01:20,190 --> 00:01:22,950 ‫But now, let's do actually something else. 31 00:01:22,950 --> 00:01:25,860 ‫So we want to store this information somewhere 32 00:01:25,860 --> 00:01:27,180 ‫and to help us with that, 33 00:01:27,180 --> 00:01:29,070 ‫we can actually use the flow chart 34 00:01:29,070 --> 00:01:31,563 ‫that we just looked at in the previous lecture. 35 00:01:32,700 --> 00:01:34,140 ‫So, we already know 36 00:01:34,140 --> 00:01:37,650 ‫that we want to store some piece of information. 37 00:01:37,650 --> 00:01:39,420 ‫Now, will that data, 38 00:01:39,420 --> 00:01:43,590 ‫so that information change at some point in the future? 39 00:01:43,590 --> 00:01:44,430 ‫Well, yes. 40 00:01:44,430 --> 00:01:48,150 ‫It definitely will each time that we add a new item 41 00:01:48,150 --> 00:01:49,623 ‫to the items list. 42 00:01:50,580 --> 00:01:55,500 ‫Now, can that data be computed from existing state or props? 43 00:01:55,500 --> 00:01:57,510 ‫Well, no. It cannot. 44 00:01:57,510 --> 00:02:00,540 ‫So therefore, we cannot derive state. 45 00:02:00,540 --> 00:02:03,240 ‫Then the next question in our flow chart 46 00:02:03,240 --> 00:02:05,190 ‫is whether this new data 47 00:02:05,190 --> 00:02:07,800 ‫should actually re-render the component 48 00:02:07,800 --> 00:02:09,870 ‫whenever it is updated. 49 00:02:09,870 --> 00:02:14,160 ‫And the answer to that question is a resounding yes. 50 00:02:14,160 --> 00:02:16,770 ‫And so therefore, as we already expected, 51 00:02:16,770 --> 00:02:19,830 ‫the result of this first part of the flow chart 52 00:02:19,830 --> 00:02:22,620 ‫is that we need to create a new piece of state 53 00:02:22,620 --> 00:02:25,650 ‫in the component that we are currently building. 54 00:02:25,650 --> 00:02:26,483 ‫And so with this, 55 00:02:26,483 --> 00:02:30,150 ‫we finished the first half here of the flow chart 56 00:02:30,150 --> 00:02:33,513 ‫which is about when to create a new piece of state. 57 00:02:34,590 --> 00:02:37,683 ‫Now back here in our code, let's actually do that. 58 00:02:39,240 --> 00:02:43,560 ‫So, let's create a new state variable called items. 59 00:02:43,560 --> 00:02:46,650 ‫And then, as always, we have our setter function, 60 00:02:46,650 --> 00:02:48,873 ‫in this case, called setItems. 61 00:02:49,980 --> 00:02:51,537 ‫And so then, useState. 62 00:02:52,410 --> 00:02:55,260 ‫And now what do you think will be the default value 63 00:02:55,260 --> 00:02:57,750 ‫for this state variable? 64 00:02:57,750 --> 00:03:00,090 ‫Well, remember that these items here 65 00:03:00,090 --> 00:03:01,860 ‫are basically the packing items 66 00:03:01,860 --> 00:03:04,950 ‫that are displayed here in the UI. 67 00:03:04,950 --> 00:03:07,530 ‫And so this, remember, is an array 68 00:03:07,530 --> 00:03:11,370 ‫and therefore, our initial state for the items 69 00:03:11,370 --> 00:03:13,440 ‫is just an empty array. 70 00:03:13,440 --> 00:03:16,560 ‫So, when we open up a new packing list... 71 00:03:16,560 --> 00:03:19,320 ‫So, when we open up this app for the first time, 72 00:03:19,320 --> 00:03:21,990 ‫of course, we don't want to have any items. 73 00:03:21,990 --> 00:03:25,023 ‫And so, that's what the empty array here basically is. 74 00:03:26,400 --> 00:03:27,233 ‫Okay? 75 00:03:27,233 --> 00:03:28,647 ‫And so now, let's actually use 76 00:03:28,647 --> 00:03:30,750 ‫the setItems function here 77 00:03:30,750 --> 00:03:33,873 ‫to add our new items to the items array. 78 00:03:34,710 --> 00:03:37,270 ‫And actually, let's do that in a separate function 79 00:03:38,550 --> 00:03:40,900 ‫and let's call that handleAddItems 80 00:03:43,440 --> 00:03:46,890 ‫and this function will receive a new item object 81 00:03:46,890 --> 00:03:49,443 ‫which it will then add to the items array. 82 00:03:50,340 --> 00:03:53,040 ‫So, let's actually immediately call the function here. 83 00:03:55,080 --> 00:03:56,950 ‫So here, we will call handleAddItems 84 00:03:57,930 --> 00:04:01,860 ‫and then, with the new item that we just create. 85 00:04:01,860 --> 00:04:03,420 ‫So, for example, with an item, 86 00:04:03,420 --> 00:04:04,983 ‫that looks just like this. 87 00:04:06,600 --> 00:04:08,790 ‫So, that's what we pass in here. 88 00:04:08,790 --> 00:04:11,740 ‫And now again, it's time to use setItems 89 00:04:13,650 --> 00:04:15,690 ‫to update or items array. 90 00:04:15,690 --> 00:04:17,730 ‫And this new items array 91 00:04:17,730 --> 00:04:20,580 ‫will basically be the current items array, 92 00:04:20,580 --> 00:04:23,520 ‫plus, the new item added to the end. 93 00:04:23,520 --> 00:04:24,720 ‫And so what this means 94 00:04:24,720 --> 00:04:28,020 ‫is that the new state depends on the current state, 95 00:04:28,020 --> 00:04:30,210 ‫and therefore, here we now need to pass in 96 00:04:30,210 --> 00:04:31,740 ‫a callback function. 97 00:04:31,740 --> 00:04:33,870 ‫So, not just a single value. 98 00:04:33,870 --> 00:04:36,420 ‫So, let's call the current state here 99 00:04:36,420 --> 00:04:38,013 ‫in this call back items. 100 00:04:39,360 --> 00:04:42,360 ‫Now then, here, let's see what we need to do. 101 00:04:42,360 --> 00:04:44,250 ‫So, remember that in React, 102 00:04:44,250 --> 00:04:47,190 ‫we are not allowed to mutate state. 103 00:04:47,190 --> 00:04:49,053 ‫So, we cannot do this. 104 00:04:50,670 --> 00:04:53,970 ‫So, we can not simply push the new item 105 00:04:53,970 --> 00:04:55,350 ‫into the items array 106 00:04:55,350 --> 00:04:58,050 ‫because with that, we would be mutating. 107 00:04:58,050 --> 00:05:01,320 ‫So, we would be changing this item's array right here. 108 00:05:01,320 --> 00:05:04,620 ‫And again, that's really not allowed in React. 109 00:05:04,620 --> 00:05:07,020 ‫So, React is all about immutability. 110 00:05:07,020 --> 00:05:08,460 ‫And so, the solution here 111 00:05:08,460 --> 00:05:10,620 ‫is to create a brand new array 112 00:05:10,620 --> 00:05:13,923 ‫which contains all the current items, plus, the new one. 113 00:05:15,330 --> 00:05:17,910 ‫So, let's return a new array 114 00:05:17,910 --> 00:05:22,450 ‫and then, in there, we simply spread the current items 115 00:05:23,310 --> 00:05:25,290 ‫and then we add another item 116 00:05:25,290 --> 00:05:27,660 ‫which is simply called item. 117 00:05:27,660 --> 00:05:29,660 ‫So, the item that we are receiving here. 118 00:05:30,990 --> 00:05:32,640 ‫Now, if this looks strange to you 119 00:05:32,640 --> 00:05:33,750 ‫then please go back 120 00:05:33,750 --> 00:05:37,080 ‫to the review of essential JavaScript section 121 00:05:37,080 --> 00:05:38,580 ‫where I have a couple of videos 122 00:05:38,580 --> 00:05:42,420 ‫on how to work with array in a immutable way. 123 00:05:42,420 --> 00:05:45,060 ‫So basically, how to add new items, 124 00:05:45,060 --> 00:05:46,290 ‫how to update 125 00:05:46,290 --> 00:05:48,810 ‫and how to delete items from an array 126 00:05:48,810 --> 00:05:51,090 ‫without mutating the original. 127 00:05:51,090 --> 00:05:52,050 ‫So, in React, 128 00:05:52,050 --> 00:05:54,840 ‫that's something that we need to do all the time. 129 00:05:54,840 --> 00:05:57,780 ‫And so, again, if you're not sure how that works 130 00:05:57,780 --> 00:05:59,430 ‫then please go back to that section 131 00:05:59,430 --> 00:06:00,450 ‫because from now on, 132 00:06:00,450 --> 00:06:04,026 ‫I will simply assume that you know how to do this. 133 00:06:04,026 --> 00:06:05,100 ‫Now, okay? 134 00:06:05,100 --> 00:06:06,990 ‫So, this is already done. 135 00:06:06,990 --> 00:06:10,740 ‫So, we now have a way of adding new items to the state. 136 00:06:10,740 --> 00:06:13,290 ‫So, let's immediately test that here. 137 00:06:13,290 --> 00:06:17,193 ‫So, let's use now 10 test items. 138 00:06:18,360 --> 00:06:21,450 ‫And so we are still logging them to the console 139 00:06:21,450 --> 00:06:23,520 ‫but now, I want to draw your attention 140 00:06:23,520 --> 00:06:25,083 ‫here again to the dev tools, 141 00:06:26,250 --> 00:06:29,190 ‫and in particular, of course, to the form component 142 00:06:29,190 --> 00:06:31,260 ‫that we are working with now. 143 00:06:31,260 --> 00:06:33,700 ‫And so down here, we already have our state 144 00:06:34,650 --> 00:06:38,820 ‫which already has this new item that we just created. 145 00:06:38,820 --> 00:06:40,230 ‫Nice. 146 00:06:40,230 --> 00:06:44,643 ‫So, let's do another one for, like, boarding passes. 147 00:06:45,570 --> 00:06:48,600 ‫And you see, immediately, it got also added 148 00:06:48,600 --> 00:06:50,253 ‫to our items array. 149 00:06:51,180 --> 00:06:54,390 ‫So, our updating logic here is working just fine. 150 00:06:54,390 --> 00:06:58,380 ‫But of course, this state is now nowhere being displayed 151 00:06:58,380 --> 00:06:59,853 ‫in the UI yet. 152 00:07:00,720 --> 00:07:01,553 ‫Right? 153 00:07:01,553 --> 00:07:04,200 ‫So, we are not using this items variable 154 00:07:04,200 --> 00:07:06,210 ‫anywhere in our JSX yet. 155 00:07:06,210 --> 00:07:07,530 ‫And the reason for that 156 00:07:07,530 --> 00:07:10,620 ‫is that actually, we do not need these items 157 00:07:10,620 --> 00:07:12,570 ‫in this current component. 158 00:07:12,570 --> 00:07:14,460 ‫The only goal of the form component 159 00:07:14,460 --> 00:07:17,220 ‫is to add new items to this array, 160 00:07:17,220 --> 00:07:19,290 ‫but not to render it. 161 00:07:19,290 --> 00:07:22,770 ‫Instead, remember that who renders these items 162 00:07:22,770 --> 00:07:25,320 ‫is actually the packing list component. 163 00:07:25,320 --> 00:07:27,930 ‫So, that's this one here, right? 164 00:07:27,930 --> 00:07:31,113 ‫But with this, we now created ourselves a problem. 165 00:07:31,950 --> 00:07:34,833 ‫So, let's take a closer look here at the component tree. 166 00:07:36,000 --> 00:07:38,730 ‫So, right now, our item state 167 00:07:38,730 --> 00:07:41,910 ‫is here inside the form component, right? 168 00:07:41,910 --> 00:07:44,850 ‫And so, this is where we update the state. 169 00:07:44,850 --> 00:07:47,670 ‫However, we need the state itself. 170 00:07:47,670 --> 00:07:50,640 ‫So, we need this item state variable 171 00:07:50,640 --> 00:07:52,440 ‫here in the packing list 172 00:07:52,440 --> 00:07:55,950 ‫because again, this is where it should actually be rendered 173 00:07:55,950 --> 00:07:57,330 ‫onto the UI. 174 00:07:57,330 --> 00:08:00,990 ‫And so now, how do we get this state from the form 175 00:08:00,990 --> 00:08:02,760 ‫to the packing list? 176 00:08:02,760 --> 00:08:05,280 ‫Well, we cannot pass it as a prop 177 00:08:05,280 --> 00:08:09,570 ‫because the form is not a parent component of packing list, 178 00:08:09,570 --> 00:08:11,820 ‫it is simply a sibling component. 179 00:08:11,820 --> 00:08:14,580 ‫But data can only flow down the tree. 180 00:08:14,580 --> 00:08:18,210 ‫It cannot flow up the tree or sideways. 181 00:08:18,210 --> 00:08:21,780 ‫So therefore, we cannot simply pass these items 182 00:08:21,780 --> 00:08:24,330 ‫to the packing list via props. 183 00:08:24,330 --> 00:08:26,970 ‫Instead, we now need to use a technique 184 00:08:26,970 --> 00:08:28,410 ‫that I mentioned before, 185 00:08:28,410 --> 00:08:31,500 ‫which is to lift up state. 186 00:08:31,500 --> 00:08:32,910 ‫So, what we're going to do now 187 00:08:32,910 --> 00:08:35,430 ‫is to take this state here, 188 00:08:35,430 --> 00:08:36,990 ‫so this line of code, 189 00:08:36,990 --> 00:08:40,533 ‫and we will move it to the closest common parent component. 190 00:08:41,490 --> 00:08:43,710 ‫So, which one is that? 191 00:08:43,710 --> 00:08:46,950 ‫Well, it's simply the app component, right? 192 00:08:46,950 --> 00:08:50,160 ‫So, this component is both, a parent of the form 193 00:08:50,160 --> 00:08:51,780 ‫and of the packing list 194 00:08:51,780 --> 00:08:54,963 ‫which are the two components which need this state. 195 00:08:56,730 --> 00:08:59,640 ‫So, again, let's grab this 196 00:08:59,640 --> 00:09:01,590 ‫and let's move to our app 197 00:09:01,590 --> 00:09:03,303 ‫and at the state right there. 198 00:09:04,530 --> 00:09:07,350 ‫And then, of course, we get these errors here 199 00:09:07,350 --> 00:09:11,760 ‫because setItems is no longer defined in the form. 200 00:09:11,760 --> 00:09:13,590 ‫So, let's fix that in a minute. 201 00:09:13,590 --> 00:09:16,680 ‫But I want to start by now passing the items 202 00:09:16,680 --> 00:09:18,603 ‫here into the packing list. 203 00:09:20,460 --> 00:09:23,280 ‫So, we define a new prop called items 204 00:09:23,280 --> 00:09:26,253 ‫into which we pass the items array. 205 00:09:27,870 --> 00:09:28,703 ‫All right? 206 00:09:28,703 --> 00:09:31,200 ‫Then let's come to the packing list 207 00:09:31,200 --> 00:09:33,780 ‫and accept that prop there. 208 00:09:33,780 --> 00:09:34,613 ‫So remember, 209 00:09:34,613 --> 00:09:39,060 ‫we can immediately destructure the props object here. 210 00:09:39,060 --> 00:09:40,890 ‫And then, instead of the initial items, 211 00:09:40,890 --> 00:09:44,103 ‫we will now finally render the actual items. 212 00:09:45,900 --> 00:09:46,733 ‫And with this, 213 00:09:46,733 --> 00:09:50,790 ‫we have now used the items state in our JSX. 214 00:09:50,790 --> 00:09:51,623 ‫Right? 215 00:09:53,220 --> 00:09:54,690 ‫And now let's take care here 216 00:09:54,690 --> 00:09:56,883 ‫of this handleAddItems function. 217 00:09:57,840 --> 00:10:00,840 ‫So actually, I will grab this entire function 218 00:10:00,840 --> 00:10:02,973 ‫and move it here. 219 00:10:04,470 --> 00:10:06,120 ‫And so now, all we have to do 220 00:10:06,120 --> 00:10:09,480 ‫in order to enable the form to update the state 221 00:10:09,480 --> 00:10:12,903 ‫is to pass in this handleAddItems function. 222 00:10:14,040 --> 00:10:15,090 ‫So, let's do that. 223 00:10:15,090 --> 00:10:16,440 ‫Let's create a new prop 224 00:10:16,440 --> 00:10:20,240 ‫and kind of a convention is to call this now onAddItems, 225 00:10:24,238 --> 00:10:25,563 ‫handleAddItems. 226 00:10:26,820 --> 00:10:28,620 ‫So, we could of course call it 227 00:10:28,620 --> 00:10:30,720 ‫the exact same prop name here. 228 00:10:30,720 --> 00:10:33,480 ‫So, we could create a prop called handleAddItems 229 00:10:33,480 --> 00:10:35,850 ‫and then pass it to function with the same name, 230 00:10:35,850 --> 00:10:39,270 ‫but it's kind of a convention for it to be like this. 231 00:10:39,270 --> 00:10:41,550 ‫So, it then becomes a bit more readable, 232 00:10:41,550 --> 00:10:44,403 ‫like onAddItems, call handleAddItems, 233 00:10:46,262 --> 00:10:47,760 ‫if that makes sense. 234 00:10:47,760 --> 00:10:49,473 ‫And then here, let's accept that. 235 00:10:51,359 --> 00:10:52,276 ‫onAddItems. 236 00:10:53,730 --> 00:10:57,087 ‫And finally, here we now need to call, of course, 237 00:10:57,087 --> 00:10:59,043 ‫the function with this prop. 238 00:11:00,210 --> 00:11:01,743 ‫So, with this prop name. 239 00:11:02,880 --> 00:11:03,713 ‫onAddItems. 240 00:11:04,770 --> 00:11:08,790 ‫And with this, we fixed all the errors that we had 241 00:11:08,790 --> 00:11:13,080 ‫but probably what we just did here is quite a bit confusing. 242 00:11:13,080 --> 00:11:16,650 ‫So, let me first now add a new item here 243 00:11:16,650 --> 00:11:17,937 ‫just to see if it works 244 00:11:17,937 --> 00:11:20,910 ‫and then I will explain what's actually happening 245 00:11:20,910 --> 00:11:21,743 ‫a bit better. 246 00:11:22,830 --> 00:11:24,720 ‫So, let's see. 247 00:11:24,720 --> 00:11:26,703 ‫And there it is. 248 00:11:27,690 --> 00:11:29,910 ‫So, we created a new item here. 249 00:11:29,910 --> 00:11:32,910 ‫It was then added into the item state 250 00:11:32,910 --> 00:11:34,533 ‫which now lives in the app. 251 00:11:35,670 --> 00:11:36,933 ‫Let's check that. 252 00:11:37,950 --> 00:11:39,510 ‫Yep, that's right. 253 00:11:39,510 --> 00:11:40,680 ‫Here it is. 254 00:11:40,680 --> 00:11:43,230 ‫And so then, that state got passed down here 255 00:11:43,230 --> 00:11:44,820 ‫into the packing list 256 00:11:44,820 --> 00:11:46,920 ‫which received it as a props 257 00:11:46,920 --> 00:11:49,950 ‫and we can see that right here also in the dev tools. 258 00:11:49,950 --> 00:11:52,350 ‫So, here we now have the items as a prop 259 00:11:52,350 --> 00:11:55,023 ‫and then, of course, that gets rendered to the UI. 260 00:11:56,460 --> 00:11:58,260 ‫Let's try another one. 261 00:11:58,260 --> 00:12:01,890 ‫And immediately, it got added here to the, 262 00:12:01,890 --> 00:12:04,110 ‫well, to this state right here 263 00:12:04,110 --> 00:12:07,203 ‫which was then passed down into the packing list. 264 00:12:08,190 --> 00:12:10,170 ‫And now about updating the state, 265 00:12:10,170 --> 00:12:12,030 ‫this is what happened. 266 00:12:12,030 --> 00:12:15,240 ‫So, we now have our handleAddItems function 267 00:12:15,240 --> 00:12:16,710 ‫right here in the app, 268 00:12:16,710 --> 00:12:21,090 ‫which is exactly where the piece of state also lives. 269 00:12:21,090 --> 00:12:24,780 ‫So, where we have the home of the items state. 270 00:12:24,780 --> 00:12:27,330 ‫And so all the logic about updating that state 271 00:12:27,330 --> 00:12:29,790 ‫is here in the same component. 272 00:12:29,790 --> 00:12:33,450 ‫However, it is the form that is actually responsible 273 00:12:33,450 --> 00:12:35,460 ‫for creating new items. 274 00:12:35,460 --> 00:12:38,580 ‫And so, therefore, we need to give this component, 275 00:12:38,580 --> 00:12:40,350 ‫so this form component here, 276 00:12:40,350 --> 00:12:44,160 ‫access to a function that can update the state. 277 00:12:44,160 --> 00:12:46,383 ‫And so, that function is handleAddItems. 278 00:12:47,670 --> 00:12:49,020 ‫So, as I mentioned before, 279 00:12:49,020 --> 00:12:52,170 ‫we can actually pass anything as a prop. 280 00:12:52,170 --> 00:12:54,450 ‫And so, that includes functions. 281 00:12:54,450 --> 00:12:58,200 ‫So, here we pass in handleAddItems as a prop 282 00:12:58,200 --> 00:13:00,350 ‫and we call that prop onAddItems, 283 00:13:01,260 --> 00:13:02,880 ‫which of course, again, 284 00:13:02,880 --> 00:13:05,310 ‫could also be called handleAddItems 285 00:13:05,310 --> 00:13:06,840 ‫which some people prefer, 286 00:13:06,840 --> 00:13:10,140 ‫but many times, you will see this convention. 287 00:13:10,140 --> 00:13:13,980 ‫So then, we come here, destructure the props 288 00:13:13,980 --> 00:13:15,930 ‫and then we call that function 289 00:13:15,930 --> 00:13:18,390 ‫whenever the form is submitted. 290 00:13:18,390 --> 00:13:19,560 ‫And that's it. 291 00:13:19,560 --> 00:13:22,320 ‫So, this is how we lift up state. 292 00:13:22,320 --> 00:13:24,120 ‫So, basically what that means 293 00:13:24,120 --> 00:13:26,880 ‫is that whenever multiple sibling components 294 00:13:26,880 --> 00:13:29,100 ‫need access to the same state, 295 00:13:29,100 --> 00:13:31,860 ‫we move that piece of state up 296 00:13:31,860 --> 00:13:35,010 ‫to the first common parent component, 297 00:13:35,010 --> 00:13:38,463 ‫which again, in our case here, was the up component. 298 00:13:39,810 --> 00:13:40,650 ‫All right? 299 00:13:40,650 --> 00:13:43,410 ‫And we will actually review this one more time 300 00:13:43,410 --> 00:13:45,060 ‫in the next lecture. 301 00:13:45,060 --> 00:13:48,090 ‫But for now, let's move back to our flow chart 302 00:13:48,090 --> 00:13:49,980 ‫and quickly complete it. 303 00:13:49,980 --> 00:13:53,010 ‫So basically, we will just review what we just did 304 00:13:53,010 --> 00:13:56,400 ‫and then see how we would have arrived at that solution 305 00:13:56,400 --> 00:13:57,650 ‫here with the flow chart. 306 00:13:58,680 --> 00:14:00,480 ‫So, the new state that we created, 307 00:14:00,480 --> 00:14:04,080 ‫was it only used in the initial component? 308 00:14:04,080 --> 00:14:06,240 ‫So, only used in a form? 309 00:14:06,240 --> 00:14:08,280 ‫No, it was not. 310 00:14:08,280 --> 00:14:09,630 ‫So, then we move here 311 00:14:09,630 --> 00:14:11,160 ‫and we ask ourselves, 312 00:14:11,160 --> 00:14:15,150 ‫is the state also needed by a child component? 313 00:14:15,150 --> 00:14:16,860 ‫And again, the answer is no. 314 00:14:16,860 --> 00:14:21,090 ‫Because instead, it was needed by a sibling component. 315 00:14:21,090 --> 00:14:22,080 ‫And so therefore, 316 00:14:22,080 --> 00:14:24,450 ‫that is how we lifted state up 317 00:14:24,450 --> 00:14:26,940 ‫to the first common parent. 318 00:14:26,940 --> 00:14:27,900 ‫All right? 319 00:14:27,900 --> 00:14:30,330 ‫So, make sure to take another look 320 00:14:30,330 --> 00:14:32,070 ‫at the code that we just wrote 321 00:14:32,070 --> 00:14:33,630 ‫and then, in the next video, 322 00:14:33,630 --> 00:14:35,580 ‫we will take an even closer look 323 00:14:35,580 --> 00:14:38,403 ‫at this concept of lifting up state.