All language subtitles for 030 Key Prop and Spread Operator.en_US

Excellent job, we have our list of the only nagging thing is the fact that we have this warning about

that unique Kiprop.

So what is happening here and how we can fix it?

You see later as we are progressing with react, of course, what we would want to do with list is,

for example, to remove some items or maybe add the items and react, wants to keep a track of what

we're adding, what we're removing.

So react is always in the loop.

Now, in order to do that, we would need to set up a special Kiprop for each and every item that worked

on.

So essentially, each and every time you have a list and react, you need to add a Kiprop with a unique

value.

Now, I can tell right away that in most cases will be hitting up the API anyway.

So there's always some kind of unique value, whether that is for the product or whatever that is for

the user or whatever.

However, in this case, since we are the ones who are setting up these items, well, of course I need

to add that.

So in here, we just need to go with ID and then whatever value you want, as long as it is unique.

So in my case, I'm just going to go with idea one, the idea of two and the idea of three as well.

So copy and paste and then ID after.

So now of course, you'll notice that while we have the error because we're not passing it now, how

I can access that while I could structure it if I had one.

Correct.

However, in this case, I think it's just going to be simple where I go with book and then ID now I

don't need to deal with that key anything in the actual book.

But now you'll notice that React is not going to complain anymore, where now everything is fine as

long as you pass this special prop.

Again, this is not checking back.

This has to be a key and unique value.

No.

One thing you'll notice once in a while where people are adding the index because in the map you can

access index.

Yes, you can technically do that.

In this case, there's going to be no problem.

You can how it's going to be a problem if you're actually doing something with the list.

So my suggestion will be following where if you know that your list will never pretty much change,

so you won't be removing the items or adding them dynamically, you can technically let the slide and

use the index.

However, it is a better setup if you always definitely use something unique, because keep in mind

that index is change as your array is changing.

How are the ID so that unique property won't change?

All right.

And the last thing that I would want to talk about in this video is another way how we can pass in those

props.

So one of the ways was setting up this book as an object prop where I have the book prop and then I'm

passing and of course, this book object.

However, there's also a case where we can use a separate operator.

Again, my job is to show you multiple syntaxes, multiple ways how you can solve it.

It is up to you whichever way you prefer.

If you don't like the spread operator set up, you don't have to use it.

However, that is my favorite, so I will use it somewhat often throughout the course.

So what am I doing over here instead of passing this as a object?

What I'm saying is that I would want to spread out all the properties, so in Essex we have separate

operator where I just go with dot, dot, dot, and that whatever is the name of the object.

So now what happens when I'm passing in?

I'm not passing anymore.

This book Property as a object.

What I'm passing this in as a separate property and in that way I don't need to use any more the book

property altogether.

What I can say is that I would like to spread out all the properties here that are coming from the book

on my property.

So what that means, again, we go back to our previous setup where either I'm looking for a prompt

if I'm the structuring over here, or keep in mind, I can also do it in function parameters as well.

So, yes, again, some refactoring, some different way.

How to solve that?

I know it's annoying for some people, but in general, it is a good practice to understand that there's

multiple ways how to solve it.

And again, it's up to you to decide whichever method you prefer.

So, again, if we will constantly log props right now, you'll see that we are back to that setup where

props is an object.

So not anymore.

This book object that we're passing, we're spraying out all the properties that we have in the book.

So once it's back to being an object, then, of course I can access these properties one by one, either

here or of course, we can come this out.

And yes, we'll refactor it one more time where we say IMG title and the author again, both of them

do exactly the same thing.

So the result will be exactly the same.

But you will see this type of syntax in other people's code.

So it's very useful to understand what is happening.

So instead of passing a book as an object and then accessing those properties one by one, I can say

how many properties I have.

Doesn't matter.

Just spread them out as props and then of course, I can access them.

Now, of course, the names need to match if he or I call this IMG.

And of course, when you're trying to access them, when you're structuring them, that also you would

need to have the same name.