1 00:00:02,270 --> 00:00:04,410 Now, that's it for this section. 2 00:00:04,410 --> 00:00:08,710 In the last section, we again implemented two way binding 3 00:00:08,710 --> 00:00:10,880 as part of the assignment. 4 00:00:10,880 --> 00:00:13,110 Actually it was a bonus section 5 00:00:13,110 --> 00:00:14,010 of the assignment I would say, 6 00:00:14,010 --> 00:00:16,480 but again, we added two way binding 7 00:00:16,480 --> 00:00:19,940 and we did something which has an official term in React 8 00:00:19,940 --> 00:00:22,670 which I don't wanna hide from you. 9 00:00:22,670 --> 00:00:25,760 We created a controlled component 10 00:00:25,760 --> 00:00:28,340 and it's not the first time we did that. 11 00:00:28,340 --> 00:00:31,370 Basically, whenever you use two way binding 12 00:00:31,370 --> 00:00:33,630 you are controlling a component 13 00:00:33,630 --> 00:00:37,100 but here we're controlling our own custom component. 14 00:00:37,100 --> 00:00:38,790 Now, what does this mean? 15 00:00:38,790 --> 00:00:42,660 It means that a value which is used in the component 16 00:00:42,660 --> 00:00:45,550 like the value selected in the dropdown 17 00:00:45,550 --> 00:00:50,550 is passed on to a parent component, through props 18 00:00:50,720 --> 00:00:54,570 and is received from the parent component. 19 00:00:54,570 --> 00:00:57,040 Both the currently set value, 20 00:00:57,040 --> 00:00:59,840 as well as the function which in the end 21 00:00:59,840 --> 00:01:04,820 handles the selected value is not part of expenses filter. 22 00:01:04,820 --> 00:01:07,860 Expenses filter is really just a component 23 00:01:07,860 --> 00:01:11,980 that presents DUI, that presents the dropdown 24 00:01:11,980 --> 00:01:15,960 and then attaches a couple of listeners or props, 25 00:01:15,960 --> 00:01:19,880 but the real logic recites in the parent component 26 00:01:19,880 --> 00:01:22,307 and that turns ExpensesFilter 27 00:01:22,307 --> 00:01:25,743 into something which is called a controlled component. 28 00:01:27,210 --> 00:01:29,210 Now, technically there is no difference. 29 00:01:30,128 --> 00:01:33,050 ExpensesFilter is still a regular component 30 00:01:33,050 --> 00:01:34,610 as you learned it. 31 00:01:34,610 --> 00:01:37,540 It's just a special term that when you see it 32 00:01:37,540 --> 00:01:39,830 basically means what I just explained 33 00:01:39,830 --> 00:01:43,370 that both the value, as well as changes to the value 34 00:01:43,370 --> 00:01:46,070 are not handled in the component itself 35 00:01:46,070 --> 00:01:48,070 but in a parent component. 36 00:01:48,070 --> 00:01:52,620 This component controls the expenses filter component. 37 00:01:52,620 --> 00:01:55,940 And that's just a term which you should be aware of. 38 00:01:55,940 --> 00:01:59,780 Another term or another concept you should be aware of 39 00:01:59,780 --> 00:02:01,990 because you might hear it from time to time 40 00:02:01,990 --> 00:02:06,990 is about presentational verses stateful components 41 00:02:07,175 --> 00:02:08,008 or stateless versus stateful components 42 00:02:10,500 --> 00:02:13,750 or dumb versus smart components. 43 00:02:13,750 --> 00:02:17,970 There are a lot of terms for that, but what do they mean? 44 00:02:17,970 --> 00:02:20,590 It simply means that in basically all 45 00:02:20,590 --> 00:02:22,750 React apps which you're building, 46 00:02:22,750 --> 00:02:26,830 you will have a couple of components that manage some state 47 00:02:26,830 --> 00:02:28,530 like this expenses component 48 00:02:28,530 --> 00:02:31,220 which manages this filter state 49 00:02:31,220 --> 00:02:34,973 or the expense form component which manages the input state. 50 00:02:35,930 --> 00:02:38,090 And then you will have other components 51 00:02:38,090 --> 00:02:42,060 which don't manage any state, like expense item 52 00:02:42,060 --> 00:02:44,300 if we remove the button, which we should do 53 00:02:44,300 --> 00:02:47,310 because it was just there for demo purposes. 54 00:02:47,310 --> 00:02:51,280 If we remove it, we can also remove the useState call 55 00:02:51,280 --> 00:02:53,270 and we should remove it. 56 00:02:53,270 --> 00:02:57,473 We can also remove that and that and if we do all of that, 57 00:02:58,960 --> 00:03:02,450 and we set this here back to props title, 58 00:03:02,450 --> 00:03:06,510 then this is a state less component as it should be. 59 00:03:06,510 --> 00:03:09,310 This component is a state less component 60 00:03:09,310 --> 00:03:13,560 also called presentational or dumb component 61 00:03:13,560 --> 00:03:15,980 because it doesn't have any internal state 62 00:03:15,980 --> 00:03:19,023 it's just there to output some data. 63 00:03:19,960 --> 00:03:22,350 And in most react applications, 64 00:03:22,350 --> 00:03:26,900 you will have more presentational and dumb components 65 00:03:26,900 --> 00:03:29,520 than smart or stateful components. 66 00:03:29,520 --> 00:03:32,620 So even though dumb might sound negative 67 00:03:32,620 --> 00:03:36,480 and it might sound like stateful components are better, 68 00:03:36,480 --> 00:03:38,010 that's not the case. 69 00:03:38,010 --> 00:03:39,870 These are really just terms 70 00:03:39,870 --> 00:03:44,440 and typically you end up with less state full components 71 00:03:44,440 --> 00:03:47,340 than with state less components. 72 00:03:47,340 --> 00:03:49,700 Because you wanna split up your application 73 00:03:49,700 --> 00:03:52,140 into small reusable pieces 74 00:03:52,140 --> 00:03:55,030 and most pieces, most components 75 00:03:55,030 --> 00:03:58,250 indeed will only focus on outputting something, 76 00:03:58,250 --> 00:04:00,180 on having some JSX code, 77 00:04:00,180 --> 00:04:02,950 maybe some transformation logic like this here 78 00:04:02,950 --> 00:04:05,260 and maybe some CSS code, 79 00:04:05,260 --> 00:04:07,420 but it's only a couple of components 80 00:04:07,420 --> 00:04:09,840 which typically do manage state. 81 00:04:09,840 --> 00:04:12,630 And then this state is spread out 82 00:04:12,630 --> 00:04:15,363 and distributed through props in the end, 83 00:04:16,570 --> 00:04:18,990 like here in the expenses component 84 00:04:18,990 --> 00:04:21,780 where we managed to filter state 85 00:04:21,780 --> 00:04:24,570 and then we pass the filtered year. 86 00:04:24,570 --> 00:04:29,540 So this state value through props, back to expenses filter. 87 00:04:29,540 --> 00:04:32,770 This is a standard pattern which you'll see a lot 88 00:04:32,770 --> 00:04:35,490 that you manage state and a couple of components, 89 00:04:35,490 --> 00:04:40,000 and then you might pass that around to other components. 90 00:04:40,000 --> 00:04:42,810 And that's basically it for this module. 91 00:04:42,810 --> 00:04:46,420 What you learned here again, was super important. 92 00:04:46,420 --> 00:04:48,450 So make sure it's clear to you, 93 00:04:48,450 --> 00:04:50,810 make sure you understand what state is 94 00:04:50,810 --> 00:04:54,750 and how you can handle events and how you can pass data 95 00:04:54,750 --> 00:04:57,240 from a child to a parent component. 96 00:04:57,240 --> 00:04:58,690 And with all of that, 97 00:04:58,690 --> 00:05:01,360 combined with the core section before 98 00:05:01,360 --> 00:05:04,100 we are recovered components in general, 99 00:05:04,100 --> 00:05:08,060 we're now prepared to dive into the next core section 100 00:05:08,060 --> 00:05:13,060 and basically conclude the hard core of React basics. 101 00:05:14,010 --> 00:05:16,820 But the next section again will be super important 102 00:05:16,820 --> 00:05:20,433 because it will be about Lists and Conditional Content.