1 00:00:02,440 --> 00:00:03,850 So let's now make sure 2 00:00:03,850 --> 00:00:08,560 that this addItemToCartHandler is being called, 3 00:00:08,560 --> 00:00:10,550 and for that we need to go to the place 4 00:00:10,550 --> 00:00:14,320 where we wanna call addItem on our context object. 5 00:00:14,320 --> 00:00:18,630 And that's in our MealItemForm in the end. 6 00:00:18,630 --> 00:00:21,950 There we of course wanna handle the form submission, 7 00:00:21,950 --> 00:00:23,580 so when this button is clicked 8 00:00:23,580 --> 00:00:25,080 and when the form is submitted, 9 00:00:25,080 --> 00:00:27,670 we in the end wanna well, 10 00:00:27,670 --> 00:00:29,460 add that item to the cart 11 00:00:29,460 --> 00:00:32,300 because that's what this form is there for. 12 00:00:32,300 --> 00:00:35,990 So as a first step in the MealItemForm Component, 13 00:00:35,990 --> 00:00:39,030 we can add our submitHandler function 14 00:00:39,030 --> 00:00:41,100 where we get the event object, 15 00:00:41,100 --> 00:00:44,550 which is sent as an argument automatically 16 00:00:44,550 --> 00:00:47,543 when we call this function upon a built-in event. 17 00:00:48,470 --> 00:00:50,650 And I wanna call this function 18 00:00:50,650 --> 00:00:53,220 or I wanna have that function called 19 00:00:53,220 --> 00:00:56,600 for the onSubmit event or the submit event 20 00:00:56,600 --> 00:00:57,930 on that form here. 21 00:00:57,930 --> 00:01:01,240 So here I point at the submitHandler. 22 00:01:01,240 --> 00:01:02,380 Now you'll learned that here 23 00:01:02,380 --> 00:01:04,540 we should call event.preventDefault 24 00:01:04,540 --> 00:01:07,860 to make sure that, that browser default of reloading 25 00:01:07,860 --> 00:01:10,430 the page is prevented. 26 00:01:10,430 --> 00:01:14,003 And then I wanna extract the entered amount. 27 00:01:15,290 --> 00:01:17,730 Now I wanna use refs for that. 28 00:01:17,730 --> 00:01:20,360 The alternative would be two way binding 29 00:01:20,360 --> 00:01:22,050 by managing some state, 30 00:01:22,050 --> 00:01:24,450 but I wanna use refs. 31 00:01:24,450 --> 00:01:26,260 Now, the thing is that here, 32 00:01:26,260 --> 00:01:28,590 I actually have a separate Component, 33 00:01:28,590 --> 00:01:30,600 a custom Component. 34 00:01:30,600 --> 00:01:35,600 Normally, we can use refs by importing useRef from react 35 00:01:38,580 --> 00:01:41,240 and then we create a ref and we assign that 36 00:01:41,240 --> 00:01:45,533 with the ref property or with the ref prop to an element. 37 00:01:46,500 --> 00:01:49,210 Generally, we can do that here as well. 38 00:01:49,210 --> 00:01:51,260 I can call useRef 39 00:01:51,260 --> 00:01:55,277 and create my amountInputRef like this. 40 00:01:59,270 --> 00:02:02,750 Now, I would want to parse that to the ref prop 41 00:02:02,750 --> 00:02:05,610 but, since this is a custom Component, 42 00:02:05,610 --> 00:02:07,500 the ref prop doesn't work, 43 00:02:07,500 --> 00:02:10,400 at least not out of the box. 44 00:02:10,400 --> 00:02:14,580 Instead, I also taught you how you can make refs work 45 00:02:14,580 --> 00:02:16,920 on custom Components. 46 00:02:16,920 --> 00:02:20,580 I showed you how this works earlier in the course. 47 00:02:20,580 --> 00:02:24,180 All we have to do is go to the Component 48 00:02:24,180 --> 00:02:27,230 where we wanna receive refs. 49 00:02:27,230 --> 00:02:31,820 In this case, that's the Input Component in the UI folder, 50 00:02:31,820 --> 00:02:36,820 and then make sure you import React in there from react 51 00:02:37,760 --> 00:02:42,760 and wrap your Component function with React.forwardRef. 52 00:02:44,450 --> 00:02:47,900 So that Component function is now our argument 53 00:02:47,900 --> 00:02:49,160 to forwardRef. 54 00:02:50,590 --> 00:02:53,510 Then you get the ref which can now be set 55 00:02:53,510 --> 00:02:56,330 through the ref prop on your Component, 56 00:02:56,330 --> 00:02:59,030 as a second parameter here, 57 00:02:59,030 --> 00:03:02,810 and you can now use it inside of your Component function 58 00:03:02,810 --> 00:03:06,470 to forward that ref to that input here. 59 00:03:06,470 --> 00:03:08,610 So here I can now set the ref prop 60 00:03:08,610 --> 00:03:12,160 on the input element to my ref parameter. 61 00:03:12,160 --> 00:03:14,190 And that's this forwarded ref, 62 00:03:14,190 --> 00:03:17,263 which is the ref which is being set, 63 00:03:18,780 --> 00:03:20,683 here on my Input Component. 64 00:03:21,870 --> 00:03:26,070 With that we can now get access to the Input through refs. 65 00:03:26,070 --> 00:03:29,970 And that allows me to read that entered value 66 00:03:29,970 --> 00:03:32,693 in my submitHandler function. 67 00:03:33,820 --> 00:03:36,287 There we can get the enteredAmount 68 00:03:38,370 --> 00:03:41,730 by accessing amountInputRef.current. 69 00:03:41,730 --> 00:03:44,620 It's always stored current for refs created 70 00:03:44,620 --> 00:03:47,113 with useRef.value, 71 00:03:47,980 --> 00:03:51,290 because amountInputRef.current will point at 72 00:03:51,290 --> 00:03:55,140 the input element which is stored in that ref in the end. 73 00:03:55,140 --> 00:03:56,900 And then every input element 74 00:03:56,900 --> 00:03:59,340 by default has a value property 75 00:03:59,340 --> 00:04:01,923 which holds the currently entered value. 76 00:04:03,260 --> 00:04:06,090 That value is always a string. 77 00:04:06,090 --> 00:04:08,240 Even if the input is of type number, 78 00:04:08,240 --> 00:04:10,033 it's always a string. 79 00:04:11,280 --> 00:04:14,120 So we can convert it to a number 80 00:04:14,120 --> 00:04:17,460 by adding the enteredAmountNumber, 81 00:04:17,460 --> 00:04:18,930 or however you wanna name it, 82 00:04:18,930 --> 00:04:22,177 by simply adding a plus in front of enteredAmount. 83 00:04:22,177 --> 00:04:26,330 And this will convert the string number 84 00:04:26,330 --> 00:04:27,963 to a number, number. 85 00:04:28,990 --> 00:04:32,300 And then we can add a little if check for validation 86 00:04:32,300 --> 00:04:37,300 where we check the entered amount as text, 87 00:04:37,370 --> 00:04:40,140 trim it to remove any white space 88 00:04:40,140 --> 00:04:42,730 and check if that's maybe empty. 89 00:04:42,730 --> 00:04:44,963 So if no value was entered, 90 00:04:46,240 --> 00:04:51,240 or if the entered amount as number is smaller than one, 91 00:04:51,940 --> 00:04:56,940 or if the entered amount as number is greater than five. 92 00:04:57,810 --> 00:05:00,420 That's a little validation I wanna add here. 93 00:05:00,420 --> 00:05:03,360 And if either of these conditions is met, 94 00:05:03,360 --> 00:05:05,750 so if we make it into this if check, 95 00:05:05,750 --> 00:05:08,630 I wanna return and not continue 96 00:05:08,630 --> 00:05:12,483 with this function execution of this submitHandler. 97 00:05:13,370 --> 00:05:16,110 I also wanna output an error message 98 00:05:16,110 --> 00:05:18,960 below my input and button, 99 00:05:18,960 --> 00:05:21,270 and therefore I'll manage some state here, 100 00:05:21,270 --> 00:05:24,113 which is of course optional but which I wanna do. 101 00:05:25,140 --> 00:05:27,300 I'll simply use useState 102 00:05:27,300 --> 00:05:29,600 because it will be a quite simple state. 103 00:05:29,600 --> 00:05:33,720 It will simply control whether this form is valid or not. 104 00:05:33,720 --> 00:05:36,520 And I'll set this to true initially 105 00:05:36,520 --> 00:05:38,770 and then extract my two values 106 00:05:38,770 --> 00:05:42,120 the state snapshot and the state updating function 107 00:05:43,040 --> 00:05:45,680 and I'll name it amountIsValid and setAmountIsValid. 108 00:05:48,780 --> 00:05:51,290 And if we make it into this if check, 109 00:05:51,290 --> 00:05:54,510 we know that the entered input was not valid. 110 00:05:54,510 --> 00:05:58,663 So here I'll call setAmountIsValid and set it to false. 111 00:05:59,670 --> 00:06:01,810 And if this is false, 112 00:06:01,810 --> 00:06:03,880 then I wanna output an error message. 113 00:06:03,880 --> 00:06:06,360 So here below the button, 114 00:06:06,360 --> 00:06:09,220 I'll output some content conditionally 115 00:06:09,220 --> 00:06:12,280 and I will check if not amountIsValid. 116 00:06:14,111 --> 00:06:14,944 and if that's the case, 117 00:06:14,944 --> 00:06:17,230 I will render a paragraph where I say, 118 00:06:17,230 --> 00:06:21,673 Please enter a valid amount one to five. 119 00:06:23,320 --> 00:06:27,430 So that's just a little addition also to practice state 120 00:06:27,430 --> 00:06:29,840 and conditional rendering again. 121 00:06:29,840 --> 00:06:33,790 Most importantly, the form submission is now only completed 122 00:06:33,790 --> 00:06:37,280 or only fully handled if we have valid inputs, 123 00:06:37,280 --> 00:06:40,600 so if we make it past this if check. 124 00:06:40,600 --> 00:06:45,550 And here I then wanna execute my context methods 125 00:06:45,550 --> 00:06:47,300 to add a cart item, 126 00:06:47,300 --> 00:06:49,550 but I will not do this in this Component. 127 00:06:49,550 --> 00:06:52,090 Instead here, I will simply call a function 128 00:06:52,090 --> 00:06:54,350 which I expect to get on props. 129 00:06:54,350 --> 00:06:56,163 And I'll name it onAddToCart. 130 00:06:57,820 --> 00:07:00,690 And I forward my enteredAmountNumber, 131 00:07:02,330 --> 00:07:06,880 because the cart item which I wanna add needs more data 132 00:07:06,880 --> 00:07:09,360 then just the entered amount. 133 00:07:09,360 --> 00:07:11,340 In this MealItemForm though, 134 00:07:11,340 --> 00:07:13,040 we only have that amount. 135 00:07:13,040 --> 00:07:17,700 We don't have the ID or a name or a price of that item. 136 00:07:17,700 --> 00:07:21,070 That's why I'm not calling the context method here 137 00:07:21,070 --> 00:07:24,520 but why I'm just calling some other function 138 00:07:24,520 --> 00:07:28,240 which I expect to get through props to parse the entered 139 00:07:28,240 --> 00:07:32,580 and validated amount number to that function. 140 00:07:32,580 --> 00:07:34,840 And now it's the MealItem Component where 141 00:07:34,840 --> 00:07:37,050 that function will be defined. 142 00:07:37,050 --> 00:07:42,050 Here I'll add addToCartHandler function 143 00:07:42,610 --> 00:07:47,150 where I get that validated amount as a parameter. 144 00:07:47,150 --> 00:07:50,980 And I parse a pointer to that function to the MealItemForm, 145 00:07:50,980 --> 00:07:53,900 on that onAddToCart prop 146 00:07:53,900 --> 00:07:57,163 which I'm executing in that Form Component. 147 00:07:58,510 --> 00:08:00,180 So here to that prop, 148 00:08:00,180 --> 00:08:04,263 I parse a pointer that is addToCartHandler function. 149 00:08:05,350 --> 00:08:08,210 And now in the addToCartHandler function, 150 00:08:08,210 --> 00:08:11,150 I wanna reach out to my context. 151 00:08:11,150 --> 00:08:14,070 So therefore in the MealItem Component, 152 00:08:14,070 --> 00:08:17,543 I also wanna get access to my context. 153 00:08:20,150 --> 00:08:23,750 So here I will import useContext from react 154 00:08:27,180 --> 00:08:30,000 and then simply call useContext. 155 00:08:30,000 --> 00:08:32,500 And we now need to import the context 156 00:08:32,500 --> 00:08:34,270 to which you wanna get access. 157 00:08:34,270 --> 00:08:37,140 So CartContext from going up 158 00:08:37,140 --> 00:08:42,140 and going up, going up again, store/cart-context 159 00:08:42,660 --> 00:08:45,560 the file with a dash in the file name 160 00:08:45,560 --> 00:08:49,840 and parse this to useContext to establish a connection. 161 00:08:49,840 --> 00:08:52,130 And then here we have our CartContext 162 00:08:53,659 --> 00:08:55,960 and in addToCartHandler, 163 00:08:55,960 --> 00:08:58,050 we can now call cartCtx.addItem 164 00:08:59,950 --> 00:09:03,970 which is one of the methods defined in our context. 165 00:09:03,970 --> 00:09:07,430 Here we're pointing at the addItemToCartHandler 166 00:09:09,330 --> 00:09:11,540 and I'm calling that function here. 167 00:09:11,540 --> 00:09:15,170 And to that function we now need to parse this item, right? 168 00:09:15,170 --> 00:09:16,560 That's what we're expecting here. 169 00:09:16,560 --> 00:09:18,270 We expect to get the item, 170 00:09:18,270 --> 00:09:21,280 which we forward to the reducer. 171 00:09:21,280 --> 00:09:24,070 So it's that item which I wanna parse to addItem. 172 00:09:24,070 --> 00:09:27,280 And hence I create a new object on the fly 173 00:09:27,280 --> 00:09:31,160 with an id which I expect to get through props here, 174 00:09:31,160 --> 00:09:32,423 so props.id, 175 00:09:33,620 --> 00:09:36,260 with a name, which I get through props 176 00:09:36,260 --> 00:09:38,960 props.name, which we're already outputting down there. 177 00:09:40,600 --> 00:09:42,420 We don't need to parse on the description 178 00:09:42,420 --> 00:09:44,890 but I do want to set an amount field 179 00:09:44,890 --> 00:09:47,303 which points at the amount we're getting here. 180 00:09:48,280 --> 00:09:50,550 And I do want to add a price field 181 00:09:50,550 --> 00:09:52,330 which points of props.price, 182 00:09:52,330 --> 00:09:54,330 not this formatted price 183 00:09:54,330 --> 00:09:57,293 but the price as a number which we get on props. 184 00:09:58,810 --> 00:10:02,300 So now we just need to make sure that we also get props.id 185 00:10:02,300 --> 00:10:05,040 and therefore in the AvailableMeals Component, 186 00:10:05,040 --> 00:10:07,160 where we render all the meal items, 187 00:10:07,160 --> 00:10:11,823 I will now also set a prop id and forward meal id. 188 00:10:13,622 --> 00:10:16,690 And with that, we should be triggering that context method 189 00:10:16,690 --> 00:10:18,630 whenever that form is submitted. 190 00:10:18,630 --> 00:10:21,253 And that should then add items to the cart. 191 00:10:22,160 --> 00:10:25,850 So if we save this, we reload, 192 00:10:25,850 --> 00:10:27,440 if I lick Add here 193 00:10:27,440 --> 00:10:29,780 you see that batch number updated, 194 00:10:29,780 --> 00:10:32,320 and it updates whenever I click add. 195 00:10:32,320 --> 00:10:36,450 Now the cart logic isn't the final logic I wanna have yet 196 00:10:36,450 --> 00:10:38,200 but at least we can see that 197 00:10:38,200 --> 00:10:40,780 the context is already working out. 198 00:10:40,780 --> 00:10:43,250 Now let's make sure that here, 199 00:10:43,250 --> 00:10:44,670 when we open the cart 200 00:10:44,670 --> 00:10:47,523 we are outputting the actual cart.