1 00:00:01,080 --> 00:00:02,340 ‫So we just created 2 00:00:02,340 --> 00:00:04,140 ‫an important piece of state 3 00:00:04,140 --> 00:00:07,080 ‫and lifted it up to a parent component 4 00:00:07,080 --> 00:00:09,390 ‫that is common to both components 5 00:00:09,390 --> 00:00:14,040 ‫that need to use or to update that state, right? 6 00:00:14,040 --> 00:00:15,840 ‫However, this whole idea 7 00:00:15,840 --> 00:00:18,120 ‫might still be a bit confusing 8 00:00:18,120 --> 00:00:22,440 ‫because in fact, it can seem quite counterintuitive. 9 00:00:22,440 --> 00:00:24,960 ‫And so let's now look at another example 10 00:00:24,960 --> 00:00:27,750 ‫and some diagrams to really understand 11 00:00:27,750 --> 00:00:30,090 ‫how lifting up state works 12 00:00:30,090 --> 00:00:31,983 ‫and why it's so important. 13 00:00:33,660 --> 00:00:35,160 ‫And as an example, 14 00:00:35,160 --> 00:00:36,990 ‫let's use the checkout part 15 00:00:36,990 --> 00:00:38,910 ‫of the Udemy interface 16 00:00:38,910 --> 00:00:41,490 ‫that we have seen in a previous lecture. 17 00:00:41,490 --> 00:00:43,380 ‫And let's say that we started 18 00:00:43,380 --> 00:00:45,990 ‫by building this promotions component 19 00:00:45,990 --> 00:00:48,900 ‫where the user can input coupon codes 20 00:00:48,900 --> 00:00:50,250 ‫that will then be added 21 00:00:50,250 --> 00:00:53,220 ‫to a list of applied coupons. 22 00:00:53,220 --> 00:00:55,080 ‫So that sounds like we need 23 00:00:55,080 --> 00:01:00,030 ‫a piece of state called coupons right here, right? 24 00:01:00,030 --> 00:01:02,880 ‫So that coupon state is now local 25 00:01:02,880 --> 00:01:04,740 ‫to the promotions component 26 00:01:04,740 --> 00:01:06,990 ‫along with a set coupons function 27 00:01:06,990 --> 00:01:09,240 ‫coming from use state. 28 00:01:09,240 --> 00:01:13,650 ‫Now next we set out to build the total component 29 00:01:13,650 --> 00:01:15,660 ‫but here we quickly realize 30 00:01:15,660 --> 00:01:17,160 ‫that the total component 31 00:01:17,160 --> 00:01:20,460 ‫also needs access to the coupon state. 32 00:01:20,460 --> 00:01:24,360 ‫Otherwise, without knowing which coupons have been applied, 33 00:01:24,360 --> 00:01:26,670 ‫how would the total component know 34 00:01:26,670 --> 00:01:28,590 ‫what discounts to apply 35 00:01:28,590 --> 00:01:31,140 ‫and what price to display? 36 00:01:31,140 --> 00:01:33,990 ‫And so here we encounter a problem. 37 00:01:33,990 --> 00:01:37,020 ‫How do we give the total component access 38 00:01:37,020 --> 00:01:38,700 ‫to the coupon state? 39 00:01:38,700 --> 00:01:42,540 ‫Because in React, we have one-way data flow. 40 00:01:42,540 --> 00:01:44,520 ‫So data can only flow down 41 00:01:44,520 --> 00:01:46,260 ‫from parents to children 42 00:01:46,260 --> 00:01:49,530 ‫but not sideways to sibling components. 43 00:01:49,530 --> 00:01:51,960 ‫Therefore, we cannot simply pass 44 00:01:51,960 --> 00:01:53,970 ‫the coupons data as props 45 00:01:53,970 --> 00:01:55,830 ‫to the total component. 46 00:01:55,830 --> 00:01:57,960 ‫That's just not possible. 47 00:01:57,960 --> 00:01:59,310 ‫And so we need a way 48 00:01:59,310 --> 00:02:02,100 ‫of sharing state with other components 49 00:02:02,100 --> 00:02:03,630 ‫that are further up 50 00:02:03,630 --> 00:02:06,660 ‫or sideways in the component tree. 51 00:02:06,660 --> 00:02:08,130 ‫But luckily for us, 52 00:02:08,130 --> 00:02:10,410 ‫we already did exactly that 53 00:02:10,410 --> 00:02:11,610 ‫in the last lecture 54 00:02:11,610 --> 00:02:14,880 ‫with the item state by lifting it up. 55 00:02:14,880 --> 00:02:18,300 ‫And so we already know that lifting up state 56 00:02:18,300 --> 00:02:21,870 ‫is the technique that will solve this problem. 57 00:02:21,870 --> 00:02:23,430 ‫But what does that mean 58 00:02:23,430 --> 00:02:26,100 ‫and how exactly does it work? 59 00:02:26,100 --> 00:02:29,010 ‫Well, lifting state up simply means 60 00:02:29,010 --> 00:02:31,680 ‫to place some state in a component 61 00:02:31,680 --> 00:02:34,440 ‫that is a parent of both components 62 00:02:34,440 --> 00:02:37,860 ‫that need the piece of state in question. 63 00:02:37,860 --> 00:02:39,420 ‫So in this example, 64 00:02:39,420 --> 00:02:42,960 ‫we would remove the coupon state from promotions 65 00:02:42,960 --> 00:02:46,110 ‫and place it in the checkout component. 66 00:02:46,110 --> 00:02:47,610 ‫And just like this, 67 00:02:47,610 --> 00:02:49,380 ‫we have lifted state up 68 00:02:49,380 --> 00:02:51,540 ‫to the closest common parent 69 00:02:51,540 --> 00:02:54,810 ‫of both total and promotions. 70 00:02:54,810 --> 00:02:57,690 ‫And now giving both these components access 71 00:02:57,690 --> 00:02:59,610 ‫to the state is as easy 72 00:02:59,610 --> 00:03:04,320 ‫as passing it down using props and that's it. 73 00:03:04,320 --> 00:03:06,330 ‫So by lifting state up, 74 00:03:06,330 --> 00:03:08,370 ‫we have just successfully shared 75 00:03:08,370 --> 00:03:11,310 ‫one piece of state with multiple components 76 00:03:11,310 --> 00:03:14,220 ‫in different positions in the component tree, 77 00:03:14,220 --> 00:03:16,380 ‫which is something that we need to do 78 00:03:16,380 --> 00:03:18,720 ‫all the time in React apps. 79 00:03:18,720 --> 00:03:20,430 ‫And so it's really important 80 00:03:20,430 --> 00:03:23,700 ‫that you get used to this pattern and remember, 81 00:03:23,700 --> 00:03:26,400 ‫that we need this pattern in the first place 82 00:03:26,400 --> 00:03:30,663 ‫as a direct consequence of React one-way data flow. 83 00:03:31,680 --> 00:03:35,280 ‫But anyway, all this now seems to be working 84 00:03:35,280 --> 00:03:37,800 ‫just fine at this point. 85 00:03:37,800 --> 00:03:39,540 ‫But now what happens 86 00:03:39,540 --> 00:03:42,000 ‫when we want to add a new coupon 87 00:03:42,000 --> 00:03:44,100 ‫to the coupon state? 88 00:03:44,100 --> 00:03:45,270 ‫Or in other words, 89 00:03:45,270 --> 00:03:47,400 ‫what happens when the user inputs 90 00:03:47,400 --> 00:03:51,300 ‫a new coupon and clicks on the apply button? 91 00:03:51,300 --> 00:03:55,260 ‫Well, we want to update the coupon state, right? 92 00:03:55,260 --> 00:03:57,390 ‫But how do we do that now? 93 00:03:57,390 --> 00:03:59,820 ‫Because after lifting this state up, 94 00:03:59,820 --> 00:04:02,550 ‫it now lives in the parent component 95 00:04:02,550 --> 00:04:05,730 ‫so not in the promotions component anymore. 96 00:04:05,730 --> 00:04:09,360 ‫Promotions only receive this data via props 97 00:04:09,360 --> 00:04:13,050 ‫but as you know, we cannot mutate props. 98 00:04:13,050 --> 00:04:15,933 ‫So that's one of the hard rules of React. 99 00:04:16,830 --> 00:04:18,930 ‫So what we're asking here is 100 00:04:18,930 --> 00:04:21,450 ‫if we have one-way data flow, 101 00:04:21,450 --> 00:04:25,590 ‫so if data can only flow from parents to children, 102 00:04:25,590 --> 00:04:29,130 ‫then how can the child component promotions update 103 00:04:29,130 --> 00:04:32,643 ‫the state that lives in the parent component, checkout? 104 00:04:33,600 --> 00:04:37,410 ‫Well, actually the solution is quite simple. 105 00:04:37,410 --> 00:04:38,550 ‫All we have to do 106 00:04:38,550 --> 00:04:41,100 ‫is to also pass the set coupons function 107 00:04:41,100 --> 00:04:43,830 ‫down as a prop to the components 108 00:04:43,830 --> 00:04:46,260 ‫who need to update the state. 109 00:04:46,260 --> 00:04:47,520 ‫And so now that we have 110 00:04:47,520 --> 00:04:50,490 ‫the set coupons function in promotions, 111 00:04:50,490 --> 00:04:52,830 ‫once a new coupon is added, 112 00:04:52,830 --> 00:04:56,670 ‫we can simply use set coupons to update the state 113 00:04:56,670 --> 00:04:59,520 ‫that lives in the parent component. 114 00:04:59,520 --> 00:05:01,590 ‫And this is actually exactly 115 00:05:01,590 --> 00:05:04,470 ‫what we also did in the previous lecture 116 00:05:04,470 --> 00:05:05,610 ‫with the difference that 117 00:05:05,610 --> 00:05:08,400 ‫we didn't directly pass set items, 118 00:05:08,400 --> 00:05:11,220 ‫but a function that uses set items 119 00:05:11,220 --> 00:05:12,750 ‫to update the items, 120 00:05:12,750 --> 00:05:14,913 ‫which is essentially the same thing. 121 00:05:15,780 --> 00:05:18,210 ‫But anyway, we can call this technique 122 00:05:18,210 --> 00:05:20,490 ‫of passing down a setter function, 123 00:05:20,490 --> 00:05:22,830 ‫child-to-parent communication 124 00:05:22,830 --> 00:05:26,010 ‫or also inverse data flow. 125 00:05:26,010 --> 00:05:29,790 ‫Inverse because usually data only flows down 126 00:05:29,790 --> 00:05:32,370 ‫but here we basically have a trick 127 00:05:32,370 --> 00:05:34,020 ‫that allows us to basically 128 00:05:34,020 --> 00:05:37,140 ‫have the data flowing up as well. 129 00:05:37,140 --> 00:05:40,770 ‫Now of course, this is not truly flowing up 130 00:05:40,770 --> 00:05:44,280 ‫but this workaround of passing down the setter function 131 00:05:44,280 --> 00:05:47,040 ‫and use it to update the parent state 132 00:05:47,040 --> 00:05:49,020 ‫is pretty close to actually 133 00:05:49,020 --> 00:05:52,050 ‫having data flowing up the tree. 134 00:05:52,050 --> 00:05:53,520 ‫Now, when I first learned 135 00:05:53,520 --> 00:05:55,800 ‫about this technique years ago, 136 00:05:55,800 --> 00:05:57,750 ‫it actually took me quite some time 137 00:05:57,750 --> 00:06:00,960 ‫to wrap my head around this whole idea 138 00:06:00,960 --> 00:06:03,870 ‫because this can actually be quite confusing. 139 00:06:03,870 --> 00:06:06,900 ‫And so that's why I created an extra lecture 140 00:06:06,900 --> 00:06:09,090 ‫with all these diagrams for you 141 00:06:09,090 --> 00:06:12,150 ‫hoping that you will have an easier time 142 00:06:12,150 --> 00:06:15,810 ‫understanding child-to-parent communication. 143 00:06:15,810 --> 00:06:17,550 ‫But that's enough talk. 144 00:06:17,550 --> 00:06:19,440 ‫Let's now go back to our code 145 00:06:19,440 --> 00:06:22,143 ‫and use this in practice a few more times.