All language subtitles for 025 Props.en_US

Amazing job now that we know that we can access JavaScript in our sex course.

Let's take a look at the props and why I would want to props.

Well, even though I could set these ones up as variables, I can pass them one.

I'll copy and paste the book, essentially one.

I'll have multiple instances of the book.

At the end of the day, they will still display the same result.

So now I want to take a look at how we can change these values here depending on whatever we are passing.

And now I'll start by moving all my variables right after the USS.

So we'll say here, set up Varsh and then I'll do the same thing for the title, so I'll pass it over

here.

And you know what?

I'll do the exact same thing with an image so called this CONSED and then I M.G. And that will be equal

to whatever value I have over here.

Now I'll write a copy of a string because it's going to be easier to copy and paste.

I have author title image and of course where I have the source again, I go back to Joska plant and

what is the variable name that is I am G so once I it nothing Breck's which is beautiful, then I'll

remove some of the stuff that we added in the last video.

I don't think it is necessary over here.

And let's remove both of these things as well.

So now we go back to our standard setup.

So once this is done.

Well, how we can pass something unique or here, because, like I said, I copy and paste.

Yeah, it works really well.

We get the same instance and everything is beautiful, but the values don't change while a book is a

function.

Correct.

Now, what do we know about functions in JavaScript?

Well, we know that there are parameters and there are arguments.

So I would have a simple function if I set up some kind of parameter, for example, name, and then

if I pass them and of course I can use it in my function.

So can we do the same thing in here?

Now, let's say and you can probably already guess that I'm suggesting that that most likely will be

able to do that otherwise.

I mean, I would be kind of mean, wouldn't it?

OK, so I have my book component, which is a function now.

Where do we write usually parameters.

It is right here.

Correct.

So let's write a primer name.

Now, I'll write this as a prop because that is a general convention.

It just sounds short for properties that we usually pass in.

However, you can call this shake.

And bake or whatever you want, OK, just keep that in mind and of course, we'll take a look at the

example a little bit later where we call the Shake and Bake.

So we've got our props.

Now, of course, we want to cancel it because I don't want to see, well, what is this value here?

What is this perhaps?

And I can console logon to places.

I can do it above the return and I can just say just make sure that the name is exactly the same.

So if you're trying to test that out, that you can call this whatever you want.

So if you're out here, bananas, don't cancel our props, cancel like bananas.

And also I can do the same thing here.

Correct.

Because remember, in the dress, we could cancel log, meaning we can go back to just one in here.

All right.

Props as well.

And we'll notice something interesting where if I inspect in my console, I have object, object, object.

OK, what's happening here?

Well, there is an object now.

The cool thing now is that, of course, I can access that object.

But obviously the next question is how can I pass something in here?

I do have the object.

That's why you can see that we can name it.

Whatever you want can be bananas.

It can be shake and bake, whatever.

At the end of the day, it's always going to be an object.

However, convention is using props.

So unless you want to be a real rebel, I would suggest sticking to that convention.

And you're not.

I think there's too many consumer locks at this point, but beautifully we can see that it is an object

now.

Well, in order to pass this in, we need to go back to where we are rendering the book.

So not where we're setting up here will accept her, where we render the book.

This is where we need to pass it.

And the way we pass it, we have a prop name and then whatever value.

So if I'm going to go here with a random prop name of job and if I set this up as a value of developer,

you'll notice that now when we cancel log, we have a job and then we have a developer.

So that's it.

Awesome.

Now, of course, we can access those values.

Now, a few things that we can notice here for the second book.

I'm still logging the props.

However, I didn't pass anything correct in here.

Of course, I have the job with the value.

However, in here I just have the empty object.

That's why the second console log essentially is just an empty object because I didn't pass him.

Can we pass something in here?

I can say title and I'll call this a random title line.

Can we pass, for example, a number?

Yeah, I could go with number or price or whatever, and I can just say simply over here that the value

will be equal to something.

Again, I go back to your script because this is still just for the time being, I'll just pass in 22.

So now notice for the first one I have job and developer.

That is the property and the value in my object here.

For the second one, I have a tile property.

The value is a random title and in here I passed and a number of property with a value of twenty two.

So what I'm trying to say as far as the value, same as with JavaScript, we can pass the values here

in the property.

Now the next question of course is not how we can access them.

If there's multiple ways how we can do that.

That's why we'll split this up in multiple videos.

But the most basic one would be using the same name that used over here.

So, again, if I could shake and bake, I'll still be able to do it.

Keep that in mind.

But you use the same name.

And now, of course, we are just accessing those properties, just like in a regular react.

Now, I did not pass my correct values as far as author, title and image.

So for the time being, I'll just create two paragraphs.

Well, I'll show you how I can access those values.

So in here I'll say that I'm looking for props and learn a job and then we'll see two things.

We'll see that for the first value, we do have the developer.

So that is correct.

But then for the second one, we have nothing.

Now, why is that happening?

Well, because I did not pass the prop by the name of job for a second.

So that is what is going to happen when the prop is not there.

So if the prop is not there.

It just won't be displayed, however, in this case.

I have the title for the second one, right, so I can copy and paste and again, I'm looking for props

and then battle.

So now, of course, this will be displayed on the second one, but not on the first one.

So hopefully this makes sense where when you're setting up a list, of course, you need to make sure

that the props that you're passing actually matched to whatever you're looking in the component.

Correct.

So if, for example, in a component I'm looking for a job and make sure that all your instances have

that job, because if that value won't be there, well, you just want displayed on the last one.

Let's go with paragraph here.

And again, we'll look for props.

And then what was the property that I was looking for?

Not, of course, the no, no, of course I'm passing in the number and there it is.

That's how we can start making these values more dynamic, as you can see, because we're accessing

the props and line.

Of course, when we are rendering the book, we pass it in again.

We have a problem and then the value.

And now as I'm looking at my values over here, can we set this up as two separate objects where essentially

what I could do is for the first book, pass the property values from the first object, where, of

course, I'm going to have my image, my author and title, and then of course, we'll do the same thing

for a different book.

Now, let me look for a short name, I think I'm going to use this one because I just don't want to

copy too long of a name.

So let's do that.

Let's refactor these three values into a object and let's call this first book.

So consed first book that will be equal to our object.

And then again we have a bunch of properties.

I'll start with an image and I'll just take these values.

So cut it out.

Copy and paste then.

What else we have because we have the title so we're going to go with title property and what is the

value areas of this one over here.

And then we have the last one of the author.

So we go with author.

And also this equal to whatever value I had, and now, of course, I would want to access them.

Now, keep in mind, we could have access this as a straight up variables like I just had them before.

The only difference right now is going to be that, of course, I'll set up proper props.

So in here, let's start with IMG.

So that's my IMG prop and that will be equal to first book because that of course is my object name

and then property value is IMG.

And then where I'm accessing the property right now, I'm not going to be looking for a job title.

No, since I will remove them.

However, for image I'm going to go for props and then I'm looking for the I am G.

So now of course again I'm grabbing whatever I have in the first book and I would need to do the same

thing for a title.

So again, the problem is title.

Again, we're going back to a Joska plant and in here I'm accessing first book and then I'm looking

for the title.

So I'll say first book and then title again.

Let me emphasize something where it doesn't have to be an object.

We could have just access the properties.

But since I would want to set up two of them to object, since I would want to have two different values.

That's why, of course, I set it up as a object.

The last one was the author.

Again, we have the prop name, which is an author, and then we look in the first book and then the

property we're looking for is the author.

So now of course, I can remove these ones.

They were just for testing purposes and then just replace place where I have the props for title and

then where I have the author.

I'm looking for the author.

Now, the problem right now is going to be the.

Yeah, the first one.

He has displayed nicely, however, for the second one notice, I'm just passing in some random.

So like I was saying, yeah, we can pass whatever props you would want, but keep in mind that if in

the component you're not looking for them, while nothing is going to happen, you can pass all day

long, but nothing is going to be around that.

However, if the component is looking for specific prop and you're not passing notice, I cannot see

the image.

So what we would need to do, well, eventually we'll set up a list and will iterate over list.

Now, all that is coming up.

But for the time being, what I would want is just copy and paste and then we'll write a second book.

Now, why am I setting up a second book?

Because now, of course, I would want change of those values.

So in here, I'm going to go for copy address and will replace it.

We're going to copy and paste.

So this is going to be a different image than, of course, I would want also get my name.

So let me see now, of course, this navigates here.

So I guess I can just copy and paste from here, like so.

So let's now get back.

We're going to go with a different value here.

And of course, I also want to get a author.

So let me somehow copy and paste, copy and paste the author.

And there it is.

Now we have this value.

So what we need to do right now for the second book is past these values as well.

But remember, of course, now I'm looking for the second object.

Now, I could technically look for the first one, but it's somewhat it doesn't make sense since I wouldn't

want to repeat that.

So I'm going to go with HMG and I will be equal to a second book.

And then again, I'm looking for AMG property.

Then the same goes for the title where I'm looking for title and then I'm looking for second book and

then the title on the last one.

Of course, you can probably already guess we have the author and then we're looking for second book

and then the author.

And once I pass in these values, not on this.

I have my first instance that is beautiful and I have the second instance where I'm getting those unique

flowers so we can already see how nicely we can start creating these lists where, yes, they all will

be displayed the same way, because we made sure that when we were setting up our component.

However, because we have something called, perhaps we can start passing in unique values where we

have a problem and either we can hard code here like we did in the beginning with the string, either

we can set up a variable or we can set up objects or arrays or whatever and then pass it as a value

here as well.

Since when we set up currently versus we're going back to a couple of rules.

We can call it whatever we want, but convention is calling it prompts one way.

How to access it is just by looking in the object that we're getting.

So we go with props and then whatever name of the problem.

And the last thing is that if you pass in some prop that you're not looking in a component, nothing

will happen.

But if the component is looking for a prop that you're not passing in, essentially you'll just have

the empty space science component is going to be looking for the prop, but the value will be undefined.