1 00:00:01,050 --> 00:00:03,930 ‫Now to practice the concept of components 2 00:00:03,930 --> 00:00:06,750 ‫and using props just a little bit more, 3 00:00:06,750 --> 00:00:11,073 ‫let's extract parts of the footer into a new component. 4 00:00:12,270 --> 00:00:16,710 ‫So the JSX here inside the footer component 5 00:00:16,710 --> 00:00:18,870 ‫is getting a little bit too long, 6 00:00:18,870 --> 00:00:22,260 ‫and so I got the idea of taking this part here 7 00:00:22,260 --> 00:00:25,230 ‫and extracting it into its own component. 8 00:00:25,230 --> 00:00:28,710 ‫So let's grab all of this and cut it, 9 00:00:28,710 --> 00:00:31,743 ‫and then we're simply going to create a new component. 10 00:00:32,910 --> 00:00:36,483 ‫So we write function, let's call it order, 11 00:00:38,160 --> 00:00:39,420 ‫and then all we have to do 12 00:00:39,420 --> 00:00:43,383 ‫is to just return that JSX that we just created. 13 00:00:45,000 --> 00:00:48,060 ‫All right, now, Prettier did not format this 14 00:00:48,060 --> 00:00:50,820 ‫because actually our code is wrong now, 15 00:00:50,820 --> 00:00:52,620 ‫because here we don't have anything 16 00:00:52,620 --> 00:00:55,260 ‫as the first value in the ternary operator, 17 00:00:55,260 --> 00:00:57,033 ‫and so let's immediately fix that. 18 00:00:58,050 --> 00:01:01,650 ‫So instead of that JSX that we had here before, 19 00:01:01,650 --> 00:01:05,673 ‫now what we want is to simply render the order component. 20 00:01:08,160 --> 00:01:12,393 ‫So order, and that's actually it. 21 00:01:13,290 --> 00:01:15,810 ‫Now, React is still not happy with us 22 00:01:15,810 --> 00:01:17,550 ‫and that's because down here, 23 00:01:17,550 --> 00:01:21,180 ‫close hour is, of course, no longer defined. 24 00:01:21,180 --> 00:01:26,130 ‫And it makes sense because close hour is only defined here 25 00:01:26,130 --> 00:01:28,050 ‫inside the footer component, 26 00:01:28,050 --> 00:01:31,680 ‫but now the JSX that we had here before is gone 27 00:01:31,680 --> 00:01:33,993 ‫and it is in the order component. 28 00:01:34,890 --> 00:01:38,460 ‫So how do we give this order component access 29 00:01:38,460 --> 00:01:40,830 ‫to this value right here? 30 00:01:40,830 --> 00:01:42,660 ‫And I hope that you guessed 31 00:01:42,660 --> 00:01:45,570 ‫that the answer is by using props. 32 00:01:45,570 --> 00:01:49,260 ‫So as we see here, props is actually also quite similar 33 00:01:49,260 --> 00:01:51,753 ‫to passing arguments into functions. 34 00:01:52,950 --> 00:01:55,713 ‫So all we have to do here is to create a prop. 35 00:01:56,640 --> 00:01:59,310 ‫So let's say open hour, 36 00:01:59,310 --> 00:02:02,010 ‫so we can just give it exactly the same name 37 00:02:02,010 --> 00:02:03,993 ‫as the variable. 38 00:02:05,370 --> 00:02:08,013 ‫So it doesn't have to be like this, but it can. 39 00:02:09,870 --> 00:02:13,323 ‫And so then here, let's receive props as a parameter, 40 00:02:14,490 --> 00:02:17,523 ‫and then we can simply read close hour from there. 41 00:02:19,230 --> 00:02:22,500 ‫And again, this works because we made the prop here 42 00:02:22,500 --> 00:02:25,320 ‫exactly the same name as the variable. 43 00:02:25,320 --> 00:02:28,200 ‫So if it was prop hours, then here, of course, 44 00:02:28,200 --> 00:02:32,460 ‫we would also have to use that, right? 45 00:02:32,460 --> 00:02:36,240 ‫But what matters is that it's working just fine. 46 00:02:36,240 --> 00:02:39,663 ‫Well, actually we are not seeing the result there, 47 00:02:41,220 --> 00:02:42,873 ‫so let's set it back to 12. 48 00:02:44,460 --> 00:02:47,400 ‫And so now, yeah, we're getting the order component 49 00:02:47,400 --> 00:02:48,540 ‫rendered there. 50 00:02:48,540 --> 00:02:51,240 ‫However, we see that here is a problem, 51 00:02:51,240 --> 00:02:54,930 ‫and I notice that's because I actually created a bug. 52 00:02:54,930 --> 00:02:57,033 ‫So here we have close hours, 53 00:02:58,230 --> 00:03:01,170 ‫but what we passed in is actually open hours. 54 00:03:01,170 --> 00:03:04,293 ‫So we're not interested in open but in close. 55 00:03:05,250 --> 00:03:10,230 ‫So this should be close hour, and here, close hour, 56 00:03:10,230 --> 00:03:14,130 ‫and here, also close hour as we had before. 57 00:03:14,130 --> 00:03:19,020 ‫And so now that's fixed, and so that's actually it. 58 00:03:19,020 --> 00:03:21,660 ‫So this is how we take a piece of JSX 59 00:03:21,660 --> 00:03:25,680 ‫when the JSX in a component is getting a little bit too big 60 00:03:25,680 --> 00:03:28,860 ‫and simply extract it into its own component. 61 00:03:28,860 --> 00:03:32,460 ‫And then if that JSX depends on some value 62 00:03:32,460 --> 00:03:36,480 ‫that was in the parent component, so like this close hour, 63 00:03:36,480 --> 00:03:39,060 ‫then we simply pass it in as a prop. 64 00:03:39,060 --> 00:03:41,520 ‫And so this is something that we're going to do all the time 65 00:03:41,520 --> 00:03:43,890 ‫when we build our React applications. 66 00:03:43,890 --> 00:03:46,890 ‫So not always do we have all the components figured out 67 00:03:46,890 --> 00:03:50,010 ‫in the beginning, but instead we start building them, 68 00:03:50,010 --> 00:03:53,580 ‫and then when they get to big, we can decide to extract 69 00:03:53,580 --> 00:03:57,270 ‫part of them into just another component. 70 00:03:57,270 --> 00:03:59,850 ‫And now, since this was the last component 71 00:03:59,850 --> 00:04:02,280 ‫that we're going to create in this project, 72 00:04:02,280 --> 00:04:05,250 ‫I invite you to take a pen and a paper 73 00:04:05,250 --> 00:04:08,100 ‫and to draw out the entire componentry 74 00:04:08,100 --> 00:04:10,170 ‫that we just built here. 75 00:04:10,170 --> 00:04:13,200 ‫So I think that's going to be a nice small exercise 76 00:04:13,200 --> 00:04:15,300 ‫for you to get a better hold 77 00:04:15,300 --> 00:04:19,320 ‫of how all the components in this application work together, 78 00:04:19,320 --> 00:04:22,050 ‫and yeah, really understand the structure 79 00:04:22,050 --> 00:04:25,260 ‫that we built here for this small project. 80 00:04:25,260 --> 00:04:27,030 ‫And then once you're done with that, 81 00:04:27,030 --> 00:04:29,523 ‫you can just simply move on to the next lecture.