Okay.
Let's talk about props in this video.
So props, it's an essential way in React to pass some information from one component to another.
And basically props are working in relationship parent child.
So if we have some information inside the app, we can pass this information into the our child, which
is whatever it's included in the return here, you can see this is one is embedded in the app.
That means the app is parent and this is child.
And then Heather might have another child.
So basically we can pass props into the child from the parent.
How we can actually do that.
It's really up to us what we would like to pass and how we would like to pass it.
Let's start with our header here.
So we have header and that's normal functional component here.
And this is a header.
Let's say this is a header, we would like to have it dynamic.
So I will go back to the application.
And what we can do is inside this tag, we can include some extra info.
So let's call it info like that.
It is this name, it's whatever we would like to pass it.
We can actually invent this so I can call it info.
I can pass some whatever I like, so I will do equal and then I will do some string.
What I can do here is I can pass a string.
Let's say this is my message like that.
And then what is happening here is into the header.
I'm passing that info.
This is my message.
If I will save it now and then you can see nothing has been changed because I haven't used this in header
yet.
So we're going to header if I would like to use that information that I passed from the app to the header,
I will need to use props like that.
So the function takes the argument of props and this props, I can use it.
So instead of this header here I can use a syntax of a curly brackets like that.
So opening and close and inside this I can run any JavaScript I like.
So in my case I would like to get props and then info which is the name of the variable we made up here.
So info.
So this info info is becoming a props.
And then I have an access to props info here if I will save it.
Now this is my message.
You can see it's not nowhere here printed, but this is the info I'm passing from here.
So if I make it, this is my message.
You can see this is reflected here.
What is more important if I will duplicate this?
If I will change this to something else and I will save it.
You can see this is my message and other info.
That's the same component.
So we use header in both cases, but for both of them I pass different message and I can display that
message here so I can have reusable component and I can change the custom components with that extra
info I'm filling in.
I don't need to limit this to just one.
I can pass more arguments like for example, my number and then I can say my number is six and then.
I'll just copy this.
I'll put it here.
It doesn't really matter if that's on the new line or in the same line, but I make it here because
it will be a more readable.
Once it is inside the stack, it will be parsed.
So I have my number six and then my number four.
Two different numbers and then I can also use that number if I will save it.
Now nothing happens because we just pass it to component.
But this component is not using this.
So if I would like to also display my number, what I have to do is I will show you one problem we have
with React so I can do a H2.
My number is.
And then in the curly brackets, I can do props and then my number.
So this is what I pass.
But we have an error.
So first thing is return by default is just proper to return one line.
So if we would like to return more than one line like that, we need to use parentheses like that and
then wrap it all around it.
Here and then we still have a problem.
You can see here we have an error because the return is prepared to return only one element, HTML element.
So what we could do is we can have div like this and then wrap everything inside in a div and I can
indent it properly.
So you can see here I save it and everything is fine.
So this is my message like that.
This is from the first component component and this is from another component.
So you can see six and four is a different and we pass it to the right, but we need to make sure that
return is will use that parenthesis here and also will return one element.
But that div is also rendered on our page.
So that's great extra element on our page.
So what we might need to do is instead of using this div, we can use the react way, which is react
and then.
Fragment like that.
And then I also need to close it.
So basically what React Fragment does is just create empty container and it's not going to be render
on the page.
It will just wrap this and return it easily.
So instead of div, that div will eventually come to the page and it will create extra container.
We might not need.
That react fragment is not doing this, so it's like returning empty one and it will return only content
of it.
So it's still working as it was.
And you can see here we can return more than one line at a time.
So this is how you use the props with a normal function.
So how can we do the same with our class based?
Basically here, you don't have a way to pass the props, but if you do extend components, the props
are automatically inside our class.
So what we can do here and let's say folder.
And let's say trademark.
Page by Christian or whatever.
So what we are doing here, we are passing another information to the footer and we name that information
as a trademark so we can pass it like that.
And then inside Footer will you can see here that the dot that means this file is not saved.
If I will do command s, I will save the file.
And you can see here everything is updated.
So footer JS and this is my class based component and I could use that instead of this is our footer,
I can use my inside brackets props because there are automatically included and then I hope.
I can do props, Dot, and then I can paste it.
I don't know why this is pasting that for me.
So I will do props like that and then trademark.
But you can see here error because inside we are inside the class.
So if you would like to refer to props, we need to use keyword this.
This refers to the class and then we use from that class props and the trademark, which is something
that we passed in here trademark.
So once I will save it, you can see here Page Christian, this is the trademark that I'm passing to
this component.
So basically this is the way I will clean it up a little bit.
This is the way we can pass information from our parent from one component to another.
We just put any message we like or any number when a piece of data we can pass actually a complex object
as well.
It doesn't have to be a simple string or a number.
We can pass any information from one function to another and then render that or passing even to further
down the chain.
So if the header will have another component here loaded and implemented here, you can pass through
the props later to the to this child as well.
So this is the way we can pass the information around and this is using the props.
So if you have the functional if you have the class based one, the props are already included.
But you need to use the this props syntax.
And if you have the functional one, you need to inject that, pass it as an argument in the function.
So props and then you can name it here.