Let's get started to see how progress works and how we can use it.
So coming back to our project here, this where we left, we have the app component, parent component
and a child component.
Let's say that we want to create a user.
Any time a user visit any of these components, for example, we can say good morning, your name is,
and then something like that.
So we can do that one by creating a component for that.
So let's go back that way and see how we can use props to avoid repetition.
So coming back to our folder structure here inside the SLC component, let's create one new folder and
call it as props.
And this folder we are going to have one component called message or greetings.
You can name it whatever you want.
So let's scaffold forward using the snippet, RFC and boom, there we go.
So for this component, let's add H2 here.
H two.
Sorry, h two rather not h one.
And we can say that good morning.
Let's say come on here and we add the name Joe and then we can add some P tag here and we can say that
where.
Welcome.
To this event.
And then we can add an age.
Let's say your age is 25.
Okay.
Something like this one.
Something like this.
So let's say that if a user visits the app component, you won't display this component.
If percent go to the parent component, you want to display that.
So now let's reduce the way we are running this component.
So inside my parent component, this one, this way is rendered so we can remove the child component
from here and now.
And now we have only one component, the app component, which is rendered by the parent component inside
that.
So let's say that we have enabled us to remove the parent component here.
Okay.
Like that.
And now we have the app component, which is this way the app component is being rendered the parent
component.
So let's say that on my app component, I want to display the message.
So I will come up here and type in message and I have the auto import.
Boom.
There you go.
So now I replace the parent component with my message component.
And there we go.
See that I have.
Good morning.
Your welcome to this event.
Your age is 25 meaning that I have displayed this component inside the app component, which is pretty
good.
Right.
But let's say that we want to make this component more dynamic.
Not always.
You will display the present name as Joe, Joe, Joe.
Whatever you go.
And then in the edge.
Is this because we have different users using your application and to have different name based on the
user's name.
So to to make it more dynamic instead of just hard coding.
So let me get back to the app component here.
Now we have two levels, all the app component and then the message component.
Now we have the app component, which is this.
So can you tell me which of these is the parent component?
Is the app component is a parent of message component because this message is being nested or being
rendered inside the app component.
So in React data are being passed from parent the parent to child component and we can do that one using
what is called prop props.
So now inside this component, we can pass in additional attributes called props.
Like any element here, we can pass in attributes like style and class names for component.
We pass in an attribute called props.
So inside here we can pass in any value we can pass in JavaScript, we can pass in string, we can pass
in a mean boolean, all kind of data types.
We can pass in as here.
For the meantime, let's pass in a string for so we can see that user name here is equal to is equal
to let's say candy.
So if we get back to the method component, we have access to this variable or data as prop here.
So now this function now receiving what is called props, we can name it whatever you want by convention,
we name it as prop.
So if I console.log the props here, let's see, let's get back to the console and now let's open our
console here.
Let's refresh it.
And now see, I have a user name called Candy inside my components so we can pass in more attributes
here.
We can pass in age which is, is a number, right?
So I'm going to use JavaScript the braces and pass in 30 and now we can pass in, let's say a boolean,
we can say it's married.
Like this.
This one simply means true.
So you can go to as force or true.
True like that.
If you save it, check.
Now you have these props being rendered, pass in a number, a boolean and then a string so we can pass
even an array of as a prop we can say that now we have let's see something like score array three five.
Yes three five and many mornings pass in survey past in the objects and then the array of data.
Let's see one, two, three, four, five, six, seven.
And now if you check the console, we have the data being passed as prop.
That's what you call prop, meaning you're passing data from.
I mean, now we are inside the parent component, right?
But we are passing data from this component to that.
So we can have even an object here inside the app component called user.
So we can declare a variable called user here and then going to be equal to objects.
And we can say user name here is equal to candy and now we can also have the is married.
Is equal to true.
And now we can also say the score is equal to an array of one, two, three, four or five.
And now we can replace this one with the variable of the core user, which is equal to user as that.
So we pass in the prop as the check it out.
And now we have let's refresh it.
And now we have the user eyes that we need to pass in the prop as also so equal to my object's called
user.
And now check it out.
I have my user.
So that is how we are able to pass data from parent to child.
So now that we are able to do that, let let me bring it back to the first one.
Yes.
So let's comment this one the same thing.
So now let's make this component more dynamic, because here the name changes and the age changes so
you can pass in the name and the age.
So here we have this.
Once we can remove even this once, and now let's maintain this too.
So how can we use it?
So if we get back to the parents, the message component here, we can now have access to the properties
of my pop, dot username and dot age.
If I make this of prop dot edge, I'm going to see the age only inside my console.
So let's use these names dynamically.
So instead of code in the name here, we can embed our JavaScript here using the props dot username.
And then the age is going to be also as Probst darts age is Probst darts age.
And let's see.
You see that?
Good morning, Candy.
Welcome to this event.
Your age is 30.
So anyway, I caught this component I can pass in dynamic value here inside to be displayed.
And that's what you call props.
Well, we can even do more by making what is called destruction.
So here, inside a prop, we can structure that and take what we want.
Username and then the age.
So here I can remove the props here and remove the props here because I've structured the props and
now well props here can move this one and now the same thing.
Okay, guys, so that's how we make use of props, how we can pass data from top to bottom now from
parent to a child.