Welcome back.
This where we left the previous video by displaying some presentational components as is.
So what we are going to do in this video is we want to make a presentational component more flexible.
Simply means that you want to make it more customisable, meaning you can customise it the way you want
based on where you want to display it.
For the meantime, here we are just displaying the CSS and react and then you pass in the button component
into the CSS React.
And also let's also call the button here the button stateless component.
Also on the same component I'm going to have to balance.
Yes.
So let's refresh it.
And now we have two buttons.
This one is on the CSS and this one is the actual button, as you mean, you call this one on a separate
component.
So the idea here is that we don't want to display the same.
Let's say I want to change the background color here on this component.
And when I component, I only change the text here to let's say login.
So that's why we are going to make it more flexible.
So now coming back to the button components button says component here.
Instead of just passing in or hard coding the case here like this one, we can receive them as props.
Do you get it?
Yes.
Let me show you how what?
I mean here.
So here we can pass in the props.
We can receive the props here when you call the component.
And here we can say that, well, we are going to inject the values dynamically.
So here we can pass in the props.
So we have the font size prop, right?
So called props dot font.
For the meantime, let me show you what I mean here before we even use it here.
So when you call the button inside the CSS component here, we can pass in the font size, font size,
and let's say the font size is equal to, let's say a number which is 20.
And now I also want to pass in a part in a part in.
Oh, but you could see a pattern of, say, ten.
And also, I also want to pass in the border radios.
Maybe I won't make it more on some pages border.
Radios.
Is also equal to, let's say, 20.
And now the background color here, you can use any value here background.
Color and is equal to string, which is.
Dre.
So now if I save this one, I get back to the component.
But the component I have access to the prop I pass in inside that.
So let's check the console.
And now let's see, we have the object as a little bit bigger or is too much.
Now we have the funds, all the props you pass in.
So now we can receive the props here and then pass into the CSS attribute to get it.
Yes, I get it.
So better still, we can structure the props here that is coming in.
We have access to the font size, check the console, we have the font size.
The first one, the order is really important here.
We have the font size.
For the first one we have the border radius is even important.
The ribbon is very important here and then we have the padding or so and they also have the background
color.
Yes, background color and that.
So now I can inject the font size as this so we can pass in the font size for my prop as that.
But because we want to add a pixels to weight, we need to add them and to temporarily try here and
then backtrack and now I have my dollar sign up in and then close it as that and I'll add my pesos as
that.
So on the bottom here, the actual button here, I'm receiving those props.
So inside here I pass in font size of 20, which is Oh, I'll get an error here.
Okay.
Because let me get back to the mine here because I'm controlling prop by doesn't exist.
So let's see, we see that I have that $20 on the side that this one is bigger.
This one is bigger than this one.
You get it.
Because when I call the body inside my case, I pass in a font size of 20.
You could see that we have this one, this font being bigger than the original one, because inside
the CSS in React component, we pass in a prop a font size of 20.
If I want to increase this 1 to 200, let's save it.
And now let's see.
Let's refresh it.
We see that we have a font size of 200 inside this, that we are customizing it.
But what about the background color here?
Let's change this one to green here.
So inside my button here, we are not going to use a background color or from the prop, which is the
background color.
Which is this one?
It.
Which is this?
Oh, why this one?
So let's save it.
And now see that I have green.
And the other one is as it is, so we can pass them.
A change difference is too much.
Let's say yes.
80 it is.
Okay, we have it.
So the same thing applies to that.
For this one we have the button has changed because when you call the button here, inside the app here,
you're not passing anything, any prop here.
So we can have what is called default value.
So here we can say that if it didn't pass in any value font size, let's take the default value of ten
for the border radius to it.
There is no value.
Let's take five and comma here and then come here.
And what about the padding tool?
If there's no padding, let's take us ten and then the background color.
If there's no background color being specified, let's pass in yellow or red.
That's that.
Let's refresh it.
And now we have it back.
Is that so?
Any way you use it, you can pass in the colour we want and the font size we want.
That is how we can make presentational component or stateless component more customizable.