1 00:00:01,050 --> 00:00:03,870 ‫The next step to making our form work 2 00:00:03,870 --> 00:00:06,990 ‫is to take the input elements that we already have 3 00:00:06,990 --> 00:00:09,270 ‫and make them controlled elements. 4 00:00:09,270 --> 00:00:11,970 ‫So elements that are entirely controlled 5 00:00:11,970 --> 00:00:13,593 ‫by React components. 6 00:00:15,030 --> 00:00:18,030 ‫And since we already know how that works, 7 00:00:18,030 --> 00:00:20,610 ‫as we have done it so many times already, 8 00:00:20,610 --> 00:00:22,353 ‫let's get right to it. 9 00:00:25,890 --> 00:00:28,923 ‫So the first one is for the bill itself. 10 00:00:30,030 --> 00:00:30,897 ‫So "setBill". 11 00:00:33,150 --> 00:00:37,890 ‫And we use state with an empty string 12 00:00:37,890 --> 00:00:41,130 ‫and we are using an empty string because these are 13 00:00:41,130 --> 00:00:43,500 ‫input text elements. 14 00:00:43,500 --> 00:00:45,393 ‫And so this is how it needs to work. 15 00:00:46,320 --> 00:00:50,433 ‫Next up, we have one for the expense paid by the user. 16 00:00:54,000 --> 00:00:57,303 ‫So let's call this one "paidByUser" 17 00:00:58,571 --> 00:01:00,767 ‫And then "setPaidByUser", 18 00:01:04,560 --> 00:01:07,920 ‫"useState", again, empty, 19 00:01:07,920 --> 00:01:12,330 ‫and then also one for the selector. 20 00:01:12,330 --> 00:01:17,330 ‫So "const", "whoIsPaying" and "setWhoIsPaying", 21 00:01:23,352 --> 00:01:28,080 ‫"useState" and here we start with the default of "user", 22 00:01:28,080 --> 00:01:31,553 ‫which is one of the values that we have here 23 00:01:31,553 --> 00:01:34,530 ‫in our two options, right? 24 00:01:34,530 --> 00:01:36,550 ‫Now it would be a bit more elegant to 25 00:01:37,462 --> 00:01:38,790 ‫use a true false value here. 26 00:01:38,790 --> 00:01:41,280 ‫For example, we could call it "isPaidByUser" 27 00:01:42,898 --> 00:01:44,460 ‫and then that could be either true or false, 28 00:01:44,460 --> 00:01:47,040 ‫but that's a little bit difficult to implement 29 00:01:47,040 --> 00:01:49,530 ‫with the values coming from here. 30 00:01:49,530 --> 00:01:52,530 ‫So we can't really pass true or false here. 31 00:01:52,530 --> 00:01:53,820 ‫That doesn't really work. 32 00:01:53,820 --> 00:01:56,340 ‫And so we just do it like this. 33 00:01:56,340 --> 00:02:00,930 ‫Okay? And now once again, we will wire everything up. 34 00:02:00,930 --> 00:02:03,483 ‫So I will do it here as fast as I can. 35 00:02:05,040 --> 00:02:08,230 ‫And you could even pause the video if you want it 36 00:02:11,160 --> 00:02:13,560 ‫and just do it yourself. 37 00:02:13,560 --> 00:02:18,147 ‫So "e.target.value". 38 00:02:19,020 --> 00:02:20,100 ‫Okay? 39 00:02:20,100 --> 00:02:24,423 ‫And now why not just copy and paste this here. 40 00:02:27,030 --> 00:02:32,030 ‫So value is now "paidByUser" and then "setPaidByUser". 41 00:02:35,820 --> 00:02:38,070 ‫And the same thing, 42 00:02:38,070 --> 00:02:41,493 ‫well not here, but here. 43 00:02:42,510 --> 00:02:47,510 ‫So here it's "whoIsPaying" and then "setWhoIsPaying". 44 00:02:50,030 --> 00:02:54,517 ‫All right, so let's write something here 45 00:02:56,797 --> 00:03:00,000 ‫and then we should see it here in our componentry. 46 00:03:00,000 --> 00:03:04,110 ‫That the state is exactly what we expected. 47 00:03:04,110 --> 00:03:07,473 ‫Or actually we should convert these two here to numbers. 48 00:03:09,390 --> 00:03:12,903 ‫So let's select this one and actually also the next one, 49 00:03:15,510 --> 00:03:18,000 ‫so we can do everything at the same time. 50 00:03:18,000 --> 00:03:20,343 ‫And if I then reload here, 51 00:03:26,466 --> 00:03:27,299 ‫then yeah. 52 00:03:27,299 --> 00:03:32,037 ‫Oh, well only this one has been converted and oh, okay. 53 00:03:32,037 --> 00:03:34,833 ‫I did a mistake here. 54 00:03:36,840 --> 00:03:40,383 ‫So, just to see that it's normal that this happens. 55 00:03:44,340 --> 00:03:46,680 ‫So I selected the wrong one there. 56 00:03:46,680 --> 00:03:49,350 ‫So let's try that one more time because 57 00:03:49,350 --> 00:03:53,610 ‫of course this is really important that we get numbers here 58 00:03:53,610 --> 00:03:57,630 ‫and not strings and yeah, that's correct. 59 00:03:57,630 --> 00:04:00,633 ‫And if I select this one, then it is different. 60 00:04:01,620 --> 00:04:04,230 ‫But now what about this one here? 61 00:04:04,230 --> 00:04:06,630 ‫So why is there no value here? 62 00:04:06,630 --> 00:04:09,660 ‫Well, here we actually don't need a state 63 00:04:09,660 --> 00:04:12,993 ‫because we cannot write anything here into this field. 64 00:04:13,860 --> 00:04:17,100 ‫Also, this expense of the difference can actually 65 00:04:17,100 --> 00:04:20,520 ‫easily be computed from the bill value minus 66 00:04:20,520 --> 00:04:22,983 ‫the expense of the user himself. 67 00:04:26,820 --> 00:04:31,050 ‫So that sounds like derived state, right? 68 00:04:31,050 --> 00:04:34,434 ‫And I'm placing it right here after "paidByUser" 69 00:04:34,434 --> 00:04:37,920 ‫just so they are in the same order as in the UI. 70 00:04:37,920 --> 00:04:42,920 ‫So "paidByFriend" is simply the bill value 71 00:04:45,060 --> 00:04:49,260 ‫minus what has been paid by user. 72 00:04:49,260 --> 00:04:51,540 ‫But actually we should be careful with this 73 00:04:51,540 --> 00:04:54,960 ‫because in the beginning the bill is just a string. 74 00:04:54,960 --> 00:04:56,790 ‫So this doesn't really work. 75 00:04:56,790 --> 00:05:01,193 ‫So, let's first ask if there is a bill, 76 00:05:01,193 --> 00:05:04,620 ‫well then the results of the operation should be this, 77 00:05:04,620 --> 00:05:08,130 ‫and if not, then let's also make it an empty string. 78 00:05:08,130 --> 00:05:11,943 ‫And now we just need to go down here and use it. 79 00:05:15,150 --> 00:05:16,713 ‫Well, right here. 80 00:05:18,420 --> 00:05:23,190 ‫So here we will only specify the value, but not the handler. 81 00:05:23,190 --> 00:05:28,190 ‫So "paidByFriend" and, nice, there is our 150. 82 00:05:30,090 --> 00:05:33,630 ‫And if we change this, let's say to 150, 83 00:05:33,630 --> 00:05:37,500 ‫then of course each time that the state is updated, 84 00:05:37,500 --> 00:05:39,540 ‫so each time that we write something new, 85 00:05:39,540 --> 00:05:42,810 ‫the state is updated and then the component re-renders. 86 00:05:42,810 --> 00:05:45,420 ‫So this function will get executed again 87 00:05:45,420 --> 00:05:47,310 ‫and then this derived state, 88 00:05:47,310 --> 00:05:51,120 ‫so this variable here will be reset as well. 89 00:05:51,120 --> 00:05:53,820 ‫So it will take these values here, again 90 00:05:53,820 --> 00:05:55,138 ‫calculate its thing, 91 00:05:55,138 --> 00:05:58,020 ‫and then store the value in this variable. 92 00:05:58,020 --> 00:06:00,363 ‫So then that gets displayed here. 93 00:06:01,200 --> 00:06:02,820 ‫But now there's just one problem 94 00:06:02,820 --> 00:06:06,213 ‫with this because let's say we write 1500, 95 00:06:07,050 --> 00:06:09,240 ‫so that's not really correct 96 00:06:09,240 --> 00:06:12,303 ‫because then here Clark's expense is negative. 97 00:06:13,230 --> 00:06:14,850 ‫So basically we need to ensure 98 00:06:14,850 --> 00:06:17,579 ‫that our expense is at most equal 99 00:06:17,579 --> 00:06:21,033 ‫to the bill value itself, but never greater than it. 100 00:06:22,380 --> 00:06:26,793 ‫So let's come down here and do that right here. 101 00:06:28,260 --> 00:06:32,430 ‫So, we could actually extract this into its own function, 102 00:06:32,430 --> 00:06:35,070 ‫but let's just do it all in line here. 103 00:06:35,070 --> 00:06:36,780 ‫So we have the number here. 104 00:06:36,780 --> 00:06:39,660 ‫So the paid value, basically, 105 00:06:39,660 --> 00:06:43,830 ‫let's copy this cause we will need it again, but for now 106 00:06:43,830 --> 00:06:47,763 ‫let's test if this value is greater than the bill. 107 00:06:50,010 --> 00:06:51,210 ‫So if it is, 108 00:06:51,210 --> 00:06:54,450 ‫then we basically don't want to change the state. 109 00:06:54,450 --> 00:06:58,023 ‫So we can just use then the current "paidByUser" again. 110 00:07:01,380 --> 00:07:04,890 ‫But otherwise then we actually want the new state to 111 00:07:04,890 --> 00:07:08,010 ‫become, well, what we have written there. 112 00:07:08,010 --> 00:07:11,910 ‫So that's "e.target.value", okay? 113 00:07:11,910 --> 00:07:16,230 ‫So again, we check in the new value that has been written 114 00:07:16,230 --> 00:07:19,140 ‫into the field and we compare it with the bill. 115 00:07:19,140 --> 00:07:20,880 ‫And if it's larger than the bill, 116 00:07:20,880 --> 00:07:24,120 ‫then we will just basically reset the value here 117 00:07:24,120 --> 00:07:26,760 ‫to "paidByUser", which is already to value 118 00:07:26,760 --> 00:07:28,500 ‫that was in there before. 119 00:07:28,500 --> 00:07:31,560 ‫But if not, so if it's a valid value, 120 00:07:31,560 --> 00:07:33,360 ‫then we just use it here. 121 00:07:33,360 --> 00:07:35,940 ‫So this will then become the new state. 122 00:07:35,940 --> 00:07:40,927 ‫And so now to just quickly reload here, let's say 200. 123 00:07:41,850 --> 00:07:44,730 ‫And so now as I type some other number here, 124 00:07:44,730 --> 00:07:47,070 ‫you cannot see it, but I'm typing it, 125 00:07:47,070 --> 00:07:50,460 ‫then this value here is not updated. 126 00:07:50,460 --> 00:07:53,029 ‫Great. So we converted our form here 127 00:07:53,029 --> 00:07:56,370 ‫into a basically controlled form where 128 00:07:56,370 --> 00:07:59,550 ‫all the elements are now controlled elements. 129 00:07:59,550 --> 00:08:02,760 ‫So what we need to do next is to add the logic 130 00:08:02,760 --> 00:08:04,770 ‫of actually splitting the bill 131 00:08:04,770 --> 00:08:08,700 ‫and then updating the balance between the two friends. 132 00:08:08,700 --> 00:08:11,790 ‫So updating the value that we can see right here. 133 00:08:11,790 --> 00:08:13,890 ‫Now that's a bit more work 134 00:08:13,890 --> 00:08:17,280 ‫and so let's actually leave that for the next video. 135 00:08:17,280 --> 00:08:19,350 ‫But before we go there, I actually want to 136 00:08:19,350 --> 00:08:21,990 ‫quickly show you what happens when we click 137 00:08:21,990 --> 00:08:24,030 ‫on one of these other friends. 138 00:08:24,030 --> 00:08:25,710 ‫So let's click here. 139 00:08:25,710 --> 00:08:30,317 ‫And you see that the state has not been reset, right? 140 00:08:31,170 --> 00:08:33,403 ‫So the state that we had here 141 00:08:33,403 --> 00:08:37,080 ‫before is exactly the same when we click on other friends. 142 00:08:37,080 --> 00:08:39,300 ‫Now with the knowledge we have at this point, 143 00:08:39,300 --> 00:08:41,670 ‫we are not yet ready to fix this 144 00:08:41,670 --> 00:08:45,210 ‫and also not really ready to understand it. 145 00:08:45,210 --> 00:08:46,770 ‫All I can say for now is 146 00:08:46,770 --> 00:08:50,160 ‫that this happens because this component is rendered 147 00:08:50,160 --> 00:08:54,570 ‫in exactly the same place in the componentry as before. 148 00:08:54,570 --> 00:08:56,486 ‫I mean, when I click here again, 149 00:08:56,486 --> 00:08:59,610 ‫then the same component is rendered again 150 00:08:59,610 --> 00:09:01,710 ‫in exactly the same position. 151 00:09:01,710 --> 00:09:04,620 ‫So the component doesn't disappear in the meantime 152 00:09:04,620 --> 00:09:07,530 ‫and so therefore it is not really re-rendered. 153 00:09:07,530 --> 00:09:11,100 ‫And so that means that the state then stays the same. 154 00:09:11,100 --> 00:09:14,310 ‫Of course, if I close this and select the same friend again, 155 00:09:14,310 --> 00:09:16,663 ‫then since the component has disappeared 156 00:09:16,663 --> 00:09:20,500 ‫and then appeared again, then the state is reset. 157 00:09:20,500 --> 00:09:23,673 ‫But again, if I do this and select another one, 158 00:09:23,673 --> 00:09:27,360 ‫then the component doesn't really completely re-render, 159 00:09:27,360 --> 00:09:29,490 ‫at least not the state in it. 160 00:09:29,490 --> 00:09:32,430 ‫So the state is not reset in this case. 161 00:09:32,430 --> 00:09:34,200 ‫But don't worry about that for now, 162 00:09:34,200 --> 00:09:37,800 ‫as we will fix this later, once we have a bit more knowledge 163 00:09:37,800 --> 00:09:40,740 ‫about some deep fundamental things that happen 164 00:09:40,740 --> 00:09:43,260 ‫inside React. Now, right. 165 00:09:43,260 --> 00:09:46,650 ‫So just wanted to show you this, but now let's move on 166 00:09:46,650 --> 00:09:50,403 ‫to the next video and actually finish up this project.