1
00:00:00,240 --> 00:00:07,740
Excellent job, we have our list of the only nagging thing is the fact that we have this warning about

2
00:00:07,860 --> 00:00:09,470
that unique Kiprop.

3
00:00:10,050 --> 00:00:12,930
So what is happening here and how we can fix it?

4
00:00:13,440 --> 00:00:20,040
You see later as we are progressing with react, of course, what we would want to do with list is,

5
00:00:20,040 --> 00:00:27,510
for example, to remove some items or maybe add the items and react, wants to keep a track of what

6
00:00:27,510 --> 00:00:29,470
we're adding, what we're removing.

7
00:00:29,760 --> 00:00:32,790
So react is always in the loop.

8
00:00:33,450 --> 00:00:40,440
Now, in order to do that, we would need to set up a special Kiprop for each and every item that worked

9
00:00:40,440 --> 00:00:40,630
on.

10
00:00:40,860 --> 00:00:48,090
So essentially, each and every time you have a list and react, you need to add a Kiprop with a unique

11
00:00:48,090 --> 00:00:48,360
value.

12
00:00:48,690 --> 00:00:53,400
Now, I can tell right away that in most cases will be hitting up the API anyway.

13
00:00:53,670 --> 00:00:58,470
So there's always some kind of unique value, whether that is for the product or whatever that is for

14
00:00:58,470 --> 00:01:00,000
the user or whatever.

15
00:01:00,030 --> 00:01:06,690
However, in this case, since we are the ones who are setting up these items, well, of course I need

16
00:01:06,690 --> 00:01:07,200
to add that.

17
00:01:07,380 --> 00:01:13,020
So in here, we just need to go with ID and then whatever value you want, as long as it is unique.

18
00:01:13,260 --> 00:01:20,850
So in my case, I'm just going to go with idea one, the idea of two and the idea of three as well.

19
00:01:21,150 --> 00:01:24,450
So copy and paste and then ID after.

20
00:01:24,720 --> 00:01:30,510
So now of course, you'll notice that while we have the error because we're not passing it now, how

21
00:01:30,510 --> 00:01:33,750
I can access that while I could structure it if I had one.

22
00:01:33,840 --> 00:01:34,250
Correct.

23
00:01:34,510 --> 00:01:40,260
However, in this case, I think it's just going to be simple where I go with book and then ID now I

24
00:01:40,260 --> 00:01:43,580
don't need to deal with that key anything in the actual book.

25
00:01:43,830 --> 00:01:50,250
But now you'll notice that React is not going to complain anymore, where now everything is fine as

26
00:01:50,250 --> 00:01:52,350
long as you pass this special prop.

27
00:01:52,620 --> 00:01:54,390
Again, this is not checking back.

28
00:01:54,600 --> 00:01:58,090
This has to be a key and unique value.

29
00:01:58,440 --> 00:01:58,830
No.

30
00:01:58,830 --> 00:02:06,030
One thing you'll notice once in a while where people are adding the index because in the map you can

31
00:02:06,030 --> 00:02:07,040
access index.

32
00:02:07,410 --> 00:02:09,690
Yes, you can technically do that.

33
00:02:09,870 --> 00:02:12,270
In this case, there's going to be no problem.

34
00:02:12,480 --> 00:02:18,380
You can how it's going to be a problem if you're actually doing something with the list.

35
00:02:18,780 --> 00:02:24,630
So my suggestion will be following where if you know that your list will never pretty much change,

36
00:02:24,870 --> 00:02:30,810
so you won't be removing the items or adding them dynamically, you can technically let the slide and

37
00:02:30,840 --> 00:02:31,700
use the index.

38
00:02:32,070 --> 00:02:38,250
However, it is a better setup if you always definitely use something unique, because keep in mind

39
00:02:38,250 --> 00:02:42,240
that index is change as your array is changing.

40
00:02:42,510 --> 00:02:46,570
How are the ID so that unique property won't change?

41
00:02:46,860 --> 00:02:47,340
All right.

42
00:02:47,580 --> 00:02:54,780
And the last thing that I would want to talk about in this video is another way how we can pass in those

43
00:02:54,780 --> 00:02:55,150
props.

44
00:02:55,440 --> 00:03:03,510
So one of the ways was setting up this book as an object prop where I have the book prop and then I'm

45
00:03:03,660 --> 00:03:06,720
passing and of course, this book object.

46
00:03:06,990 --> 00:03:10,750
However, there's also a case where we can use a separate operator.

47
00:03:10,890 --> 00:03:16,590
Again, my job is to show you multiple syntaxes, multiple ways how you can solve it.

48
00:03:16,810 --> 00:03:19,770
It is up to you whichever way you prefer.

49
00:03:20,010 --> 00:03:23,250
If you don't like the spread operator set up, you don't have to use it.

50
00:03:23,260 --> 00:03:29,940
However, that is my favorite, so I will use it somewhat often throughout the course.

51
00:03:30,240 --> 00:03:35,490
So what am I doing over here instead of passing this as a object?

52
00:03:36,350 --> 00:03:43,520
What I'm saying is that I would want to spread out all the properties, so in Essex we have separate

53
00:03:43,530 --> 00:03:50,330
operator where I just go with dot, dot, dot, and that whatever is the name of the object.

54
00:03:50,720 --> 00:03:53,420
So now what happens when I'm passing in?

55
00:03:53,570 --> 00:03:54,970
I'm not passing anymore.

56
00:03:55,040 --> 00:03:58,310
This book Property as a object.

57
00:03:58,520 --> 00:04:05,690
What I'm passing this in as a separate property and in that way I don't need to use any more the book

58
00:04:05,720 --> 00:04:07,000
property altogether.

59
00:04:07,310 --> 00:04:14,720
What I can say is that I would like to spread out all the properties here that are coming from the book

60
00:04:15,110 --> 00:04:16,910
on my property.

61
00:04:17,300 --> 00:04:23,720
So what that means, again, we go back to our previous setup where either I'm looking for a prompt

62
00:04:24,080 --> 00:04:30,820
if I'm the structuring over here, or keep in mind, I can also do it in function parameters as well.

63
00:04:31,190 --> 00:04:34,910
So, yes, again, some refactoring, some different way.

64
00:04:34,910 --> 00:04:35,780
How to solve that?

65
00:04:36,110 --> 00:04:42,740
I know it's annoying for some people, but in general, it is a good practice to understand that there's

66
00:04:43,010 --> 00:04:44,620
multiple ways how to solve it.

67
00:04:44,630 --> 00:04:49,550
And again, it's up to you to decide whichever method you prefer.

68
00:04:49,880 --> 00:04:55,880
So, again, if we will constantly log props right now, you'll see that we are back to that setup where

69
00:04:55,910 --> 00:04:57,260
props is an object.

70
00:04:57,590 --> 00:04:58,850
So not anymore.

71
00:04:58,880 --> 00:05:05,850
This book object that we're passing, we're spraying out all the properties that we have in the book.

72
00:05:06,230 --> 00:05:12,800
So once it's back to being an object, then, of course I can access these properties one by one, either

73
00:05:12,800 --> 00:05:15,470
here or of course, we can come this out.

74
00:05:15,650 --> 00:05:23,750
And yes, we'll refactor it one more time where we say IMG title and the author again, both of them

75
00:05:23,750 --> 00:05:25,700
do exactly the same thing.

76
00:05:25,970 --> 00:05:28,040
So the result will be exactly the same.

77
00:05:28,400 --> 00:05:33,230
But you will see this type of syntax in other people's code.

78
00:05:33,470 --> 00:05:35,770
So it's very useful to understand what is happening.

79
00:05:35,900 --> 00:05:42,440
So instead of passing a book as an object and then accessing those properties one by one, I can say

80
00:05:42,620 --> 00:05:44,370
how many properties I have.

81
00:05:44,390 --> 00:05:45,050
Doesn't matter.

82
00:05:45,230 --> 00:05:49,480
Just spread them out as props and then of course, I can access them.

83
00:05:49,490 --> 00:05:53,800
Now, of course, the names need to match if he or I call this IMG.

84
00:05:54,050 --> 00:06:01,070
And of course, when you're trying to access them, when you're structuring them, that also you would

85
00:06:01,070 --> 00:06:03,200
need to have the same name.