1 00:00:00,520 --> 00:00:01,839 Welcome back. 2 00:00:02,320 --> 00:00:08,620 This where we left the previous video by displaying some presentational components as is. 3 00:00:08,860 --> 00:00:15,820 So what we are going to do in this video is we want to make a presentational component more flexible. 4 00:00:15,820 --> 00:00:21,220 Simply means that you want to make it more customisable, meaning you can customise it the way you want 5 00:00:21,220 --> 00:00:23,500 based on where you want to display it. 6 00:00:23,620 --> 00:00:31,990 For the meantime, here we are just displaying the CSS and react and then you pass in the button component 7 00:00:31,990 --> 00:00:34,060 into the CSS React. 8 00:00:34,510 --> 00:00:41,020 And also let's also call the button here the button stateless component. 9 00:00:41,020 --> 00:00:44,470 Also on the same component I'm going to have to balance. 10 00:00:44,470 --> 00:00:44,950 Yes. 11 00:00:44,950 --> 00:00:46,210 So let's refresh it. 12 00:00:46,210 --> 00:00:48,340 And now we have two buttons. 13 00:00:48,340 --> 00:00:54,760 This one is on the CSS and this one is the actual button, as you mean, you call this one on a separate 14 00:00:54,760 --> 00:00:55,660 component. 15 00:00:55,840 --> 00:00:59,530 So the idea here is that we don't want to display the same. 16 00:00:59,530 --> 00:01:03,370 Let's say I want to change the background color here on this component. 17 00:01:03,370 --> 00:01:06,850 And when I component, I only change the text here to let's say login. 18 00:01:06,940 --> 00:01:10,060 So that's why we are going to make it more flexible. 19 00:01:10,480 --> 00:01:16,120 So now coming back to the button components button says component here. 20 00:01:17,220 --> 00:01:25,410 Instead of just passing in or hard coding the case here like this one, we can receive them as props. 21 00:01:25,800 --> 00:01:26,610 Do you get it? 22 00:01:26,640 --> 00:01:27,090 Yes. 23 00:01:27,090 --> 00:01:27,900 Let me show you how what? 24 00:01:27,900 --> 00:01:28,740 I mean here. 25 00:01:29,280 --> 00:01:32,880 So here we can pass in the props. 26 00:01:33,420 --> 00:01:36,390 We can receive the props here when you call the component. 27 00:01:36,450 --> 00:01:43,740 And here we can say that, well, we are going to inject the values dynamically. 28 00:01:44,040 --> 00:01:48,420 So here we can pass in the props. 29 00:01:48,660 --> 00:01:51,810 So we have the font size prop, right? 30 00:01:51,810 --> 00:01:55,020 So called props dot font. 31 00:01:55,020 --> 00:01:58,050 For the meantime, let me show you what I mean here before we even use it here. 32 00:01:58,320 --> 00:02:07,740 So when you call the button inside the CSS component here, we can pass in the font size, font size, 33 00:02:07,740 --> 00:02:15,660 and let's say the font size is equal to, let's say a number which is 20. 34 00:02:16,290 --> 00:02:21,390 And now I also want to pass in a part in a part in. 35 00:02:23,020 --> 00:02:28,690 Oh, but you could see a pattern of, say, ten. 36 00:02:28,840 --> 00:02:32,380 And also, I also want to pass in the border radios. 37 00:02:32,380 --> 00:02:36,160 Maybe I won't make it more on some pages border. 38 00:02:37,460 --> 00:02:38,510 Radios. 39 00:02:39,960 --> 00:02:44,190 Is also equal to, let's say, 20. 40 00:02:44,460 --> 00:02:51,330 And now the background color here, you can use any value here background. 41 00:02:53,830 --> 00:02:58,180 Color and is equal to string, which is. 42 00:02:58,980 --> 00:02:59,910 Dre. 43 00:03:00,030 --> 00:03:03,450 So now if I save this one, I get back to the component. 44 00:03:03,450 --> 00:03:08,100 But the component I have access to the prop I pass in inside that. 45 00:03:08,310 --> 00:03:10,710 So let's check the console. 46 00:03:10,770 --> 00:03:18,690 And now let's see, we have the object as a little bit bigger or is too much. 47 00:03:18,780 --> 00:03:21,450 Now we have the funds, all the props you pass in. 48 00:03:21,450 --> 00:03:28,280 So now we can receive the props here and then pass into the CSS attribute to get it. 49 00:03:28,290 --> 00:03:29,570 Yes, I get it. 50 00:03:29,580 --> 00:03:34,350 So better still, we can structure the props here that is coming in. 51 00:03:34,650 --> 00:03:39,810 We have access to the font size, check the console, we have the font size. 52 00:03:39,990 --> 00:03:42,750 The first one, the order is really important here. 53 00:03:43,260 --> 00:03:44,430 We have the font size. 54 00:03:44,430 --> 00:03:48,570 For the first one we have the border radius is even important. 55 00:03:48,570 --> 00:03:58,530 The ribbon is very important here and then we have the padding or so and they also have the background 56 00:03:58,530 --> 00:03:59,280 color. 57 00:03:59,280 --> 00:04:03,960 Yes, background color and that. 58 00:04:04,110 --> 00:04:14,700 So now I can inject the font size as this so we can pass in the font size for my prop as that. 59 00:04:14,700 --> 00:04:22,140 But because we want to add a pixels to weight, we need to add them and to temporarily try here and 60 00:04:22,140 --> 00:04:32,520 then backtrack and now I have my dollar sign up in and then close it as that and I'll add my pesos as 61 00:04:32,520 --> 00:04:33,060 that. 62 00:04:33,420 --> 00:04:39,720 So on the bottom here, the actual button here, I'm receiving those props. 63 00:04:39,720 --> 00:04:46,140 So inside here I pass in font size of 20, which is Oh, I'll get an error here. 64 00:04:46,620 --> 00:04:46,920 Okay. 65 00:04:46,920 --> 00:04:52,230 Because let me get back to the mine here because I'm controlling prop by doesn't exist. 66 00:04:52,230 --> 00:04:59,370 So let's see, we see that I have that $20 on the side that this one is bigger. 67 00:04:59,400 --> 00:05:00,990 This one is bigger than this one. 68 00:05:01,020 --> 00:05:01,440 You get it. 69 00:05:01,440 --> 00:05:07,500 Because when I call the body inside my case, I pass in a font size of 20. 70 00:05:07,920 --> 00:05:15,510 You could see that we have this one, this font being bigger than the original one, because inside 71 00:05:15,510 --> 00:05:21,920 the CSS in React component, we pass in a prop a font size of 20. 72 00:05:21,930 --> 00:05:25,530 If I want to increase this 1 to 200, let's save it. 73 00:05:25,680 --> 00:05:26,760 And now let's see. 74 00:05:28,640 --> 00:05:29,810 Let's refresh it. 75 00:05:30,320 --> 00:05:36,140 We see that we have a font size of 200 inside this, that we are customizing it. 76 00:05:36,350 --> 00:05:38,810 But what about the background color here? 77 00:05:38,840 --> 00:05:41,440 Let's change this one to green here. 78 00:05:41,450 --> 00:05:49,820 So inside my button here, we are not going to use a background color or from the prop, which is the 79 00:05:49,820 --> 00:05:50,660 background color. 80 00:05:50,660 --> 00:05:51,650 Which is this one? 81 00:05:52,160 --> 00:05:53,420 Which is this one? 82 00:05:53,630 --> 00:05:53,810 It. 83 00:05:55,640 --> 00:05:57,080 Which is this? 84 00:05:57,880 --> 00:05:59,680 Oh, why this one? 85 00:05:59,890 --> 00:06:01,330 So let's save it. 86 00:06:01,330 --> 00:06:03,310 And now see that I have green. 87 00:06:03,310 --> 00:06:06,940 And the other one is as it is, so we can pass them. 88 00:06:06,940 --> 00:06:08,830 A change difference is too much. 89 00:06:09,250 --> 00:06:11,980 Let's say yes. 90 00:06:11,980 --> 00:06:13,780 80 it is. 91 00:06:13,780 --> 00:06:16,240 Okay, we have it. 92 00:06:16,240 --> 00:06:20,610 So the same thing applies to that. 93 00:06:20,620 --> 00:06:27,760 For this one we have the button has changed because when you call the button here, inside the app here, 94 00:06:28,060 --> 00:06:31,000 you're not passing anything, any prop here. 95 00:06:31,000 --> 00:06:33,940 So we can have what is called default value. 96 00:06:33,970 --> 00:06:41,380 So here we can say that if it didn't pass in any value font size, let's take the default value of ten 97 00:06:42,040 --> 00:06:43,780 for the border radius to it. 98 00:06:43,780 --> 00:06:44,580 There is no value. 99 00:06:44,590 --> 00:06:48,850 Let's take five and comma here and then come here. 100 00:06:48,850 --> 00:06:50,290 And what about the padding tool? 101 00:06:50,320 --> 00:06:54,940 If there's no padding, let's take us ten and then the background color. 102 00:06:54,940 --> 00:07:00,730 If there's no background color being specified, let's pass in yellow or red. 103 00:07:02,440 --> 00:07:02,920 That's that. 104 00:07:03,640 --> 00:07:04,990 Let's refresh it. 105 00:07:04,990 --> 00:07:06,520 And now we have it back. 106 00:07:06,680 --> 00:07:07,180 Is that so? 107 00:07:07,420 --> 00:07:12,510 Any way you use it, you can pass in the colour we want and the font size we want. 108 00:07:12,520 --> 00:07:18,730 That is how we can make presentational component or stateless component more customizable.