1
00:00:00,810 --> 00:00:01,600
Nicely done.

2
00:00:01,770 --> 00:00:11,610
And once we're experts on props now, let's focus on our data, because at the moment, notice we have

3
00:00:11,610 --> 00:00:15,240
Facebook, we have second book and life is great.

4
00:00:15,750 --> 00:00:23,640
But we are somewhat repeating ourselves, aren't we, where I'm creating some component when I pass

5
00:00:23,640 --> 00:00:29,730
and the props van, for example, I would be setting up some children and we can already imagine that

6
00:00:29,730 --> 00:00:38,790
if we have a list like they have in the Amazon, it would be somewhat tiresome to keep on repeating

7
00:00:38,790 --> 00:00:39,480
the same stuff.

8
00:00:39,870 --> 00:00:45,810
So each and every time we would need to create a object line, each and every time, we also would need

9
00:00:45,810 --> 00:00:51,220
to set up a component and then notice how our file is getting bigger and bigger.

10
00:00:51,720 --> 00:00:57,250
So if I have a hundred books like this, it is not very practical.

11
00:00:57,780 --> 00:01:04,770
So how we could change that around is we could set this up as an array so we would still have objects,

12
00:01:04,770 --> 00:01:09,590
but they will be in the array and then we could iterate over that.

13
00:01:10,530 --> 00:01:14,010
And for each and every item display that book.

14
00:01:14,550 --> 00:01:16,680
So that way we don't have to repeat ourselves.

15
00:01:17,010 --> 00:01:20,850
And yes, again, we will refactor the application.

16
00:01:21,120 --> 00:01:25,740
Now, let me just quickly mention the reason why we keep on refactoring, because, of course, we're

17
00:01:25,740 --> 00:01:30,840
starting with the most basic example and we're slowly building up.

18
00:01:31,320 --> 00:01:34,810
And then as we're building up, yes, we will delete some stuff.

19
00:01:34,950 --> 00:01:40,200
Yes, we will refactor some stuff, because that's the only way we can do that.

20
00:01:40,210 --> 00:01:44,040
So I'll remove my children for the time being.

21
00:01:44,310 --> 00:01:46,440
We really don't care about the children.

22
00:01:46,920 --> 00:01:47,940
Then why?

23
00:01:47,970 --> 00:01:49,410
Of course, we're dealing with children.

24
00:01:49,710 --> 00:01:51,600
We're also will remove them.

25
00:01:51,720 --> 00:01:56,490
Now, of course, you can keep them if you want, but since we're not passing anything in doesn't really

26
00:01:56,490 --> 00:01:57,200
make much sense.

27
00:01:57,540 --> 00:02:00,740
I'll also remove this children as well.

28
00:02:01,640 --> 00:02:09,650
And I guess let's start with our list, so first we're have the first book and second book, I can just

29
00:02:09,650 --> 00:02:15,790
simply remove both variables so these will become our objects.

30
00:02:16,310 --> 00:02:20,880
Now, what do we need to do here is simply set up, right.

31
00:02:21,230 --> 00:02:22,540
And I'll call this box.

32
00:02:22,580 --> 00:02:25,070
So Consed is equal to a box.

33
00:02:25,490 --> 00:02:29,870
And then of course, let's enclose both of our objects.

34
00:02:30,170 --> 00:02:33,440
And of course in here it's not going to be a semicolon anymore.

35
00:02:33,650 --> 00:02:37,830
It is going to be a comma and same thing over here.

36
00:02:37,860 --> 00:02:39,840
Let's remove that semicolon.

37
00:02:40,230 --> 00:02:43,080
So now of course we get a bunch of errors.

38
00:02:43,100 --> 00:02:43,550
Why?

39
00:02:44,000 --> 00:02:46,300
Well, because there is no variable anymore.

40
00:02:46,490 --> 00:02:48,190
First book and second book.

41
00:02:48,410 --> 00:02:55,610
And I think it's actually going to be quite easier if we just remove the both books as well for the

42
00:02:55,610 --> 00:02:56,120
time being.

43
00:02:56,450 --> 00:02:56,990
Don't worry.

44
00:02:57,240 --> 00:02:59,220
Later, of course, we will add it.

45
00:02:59,690 --> 00:03:04,880
So what I would want to showcase first, but first I want to showcase that.

46
00:03:04,910 --> 00:03:08,570
Yes, of course we can access this book.

47
00:03:08,690 --> 00:03:09,050
All right.

48
00:03:09,590 --> 00:03:17,390
So in the book list, I'm going to go back to JavaScript, so I will set up my curly braces and I'll

49
00:03:17,570 --> 00:03:20,000
just type books now.

50
00:03:20,030 --> 00:03:27,560
Life is great, but it says over here that objects are not valid as react child.

51
00:03:29,100 --> 00:03:31,600
OK, what is happening over here?

52
00:03:32,010 --> 00:03:40,430
Well, we have the array, but each and every item in that order is an object and react will complain

53
00:03:40,450 --> 00:03:43,600
that, listen, I cannot render the object.

54
00:03:44,220 --> 00:03:50,560
OK, so let's start out with just an array of strings thrown here.

55
00:03:50,580 --> 00:03:55,770
I'm going to go with Consed and the names and I'll pass in the area again.

56
00:03:55,920 --> 00:03:59,280
So John and then Peter.

57
00:03:59,760 --> 00:04:02,120
And then also let's set up Susan.

58
00:04:02,610 --> 00:04:04,550
So three names analysis throughout.

59
00:04:04,830 --> 00:04:09,660
And by the way, the reason why I showed you this error, because once in a while you will have this

60
00:04:09,660 --> 00:04:15,820
error when essentially you will set up a map method that we will cover a little bit later.

61
00:04:16,080 --> 00:04:23,880
So once you hit this error, just try to remember that you're not accessing the proper values, because

62
00:04:23,880 --> 00:04:30,900
if you have this error of the child where it is an object, that just means that you either haven't

63
00:04:31,080 --> 00:04:34,330
the structure properly or you're not acting properly.

64
00:04:34,610 --> 00:04:37,270
So now let's start out with those strengths.

65
00:04:37,590 --> 00:04:41,370
So now I'm going to go back to names and life is awesome.

66
00:04:41,790 --> 00:04:45,630
I am displaying Meyera correctly in Riak.

67
00:04:46,230 --> 00:04:54,010
Now, the Gotcher here, of course, is that I'm not dropping those names in anything right now.

68
00:04:54,010 --> 00:04:59,700
How we can wrap our JavaScript values in the HMO.

69
00:05:00,510 --> 00:05:08,700
And of course, in JavaScript, we do that with a map method so I can write it here where I'm accessing

70
00:05:08,700 --> 00:05:14,280
the Joska plant or I can set up a new variable that is up to me.

71
00:05:14,550 --> 00:05:18,270
So I'll try it with a new variable here.

72
00:05:18,270 --> 00:05:25,740
And then when we work with those books, then of course I'll do it right here in the react, meaning

73
00:05:25,740 --> 00:05:26,770
in the G.S..

74
00:05:27,390 --> 00:05:32,480
So let's call this new names or contact new names, and that is equal to a name.

75
00:05:32,610 --> 00:05:35,010
And of course, I'm iterating over this.

76
00:05:35,010 --> 00:05:35,360
All right.

77
00:05:35,370 --> 00:05:36,980
Using a map method.

78
00:05:37,500 --> 00:05:44,580
And now what I would want is to wrap each and every name in adding one, because at the moment, yeah,

79
00:05:44,580 --> 00:05:45,270
it's nice.

80
00:05:45,270 --> 00:05:53,030
I can see my list of names, but it's also somewhat meaningless because it is not displayed nicely.

81
00:05:53,520 --> 00:05:57,750
So I already know that with my method I'm accessing each and every name.

82
00:05:58,050 --> 00:06:04,200
Now, if you want to access that, of course you can just set up a perimeter and to say your name.

83
00:06:04,470 --> 00:06:08,730
And then for the time being, if you want to consult Lorgat, sure, console the name.

84
00:06:09,030 --> 00:06:16,260
And this is also something that will do a lot in the course is we will consider log it now also comes

85
00:06:16,470 --> 00:06:19,560
a new name just so we can see the result.

86
00:06:19,890 --> 00:06:25,950
And once we take a look at the console, I can see that each and every time I'm logging a name.

87
00:06:26,430 --> 00:06:26,980
All right.

88
00:06:27,030 --> 00:06:28,830
So that is John, Peter and Susan.

89
00:06:29,160 --> 00:06:31,800
But my values come back as undefined.

90
00:06:32,130 --> 00:06:35,190
And the reason for that, because I'm not returning anything.

91
00:06:35,820 --> 00:06:41,030
So, OK, we have the names and I can access each and every name.

92
00:06:41,460 --> 00:06:43,980
Why don't we wrap this in the HDMI?

93
00:06:44,490 --> 00:06:52,560
Meaning instead of just displaying what items I have in my right now, I would want to display each

94
00:06:52,560 --> 00:06:55,410
and every item wrapped in adding one.

95
00:06:55,620 --> 00:06:58,350
And the only thing I would need to do is go with a return.

96
00:06:58,710 --> 00:07:03,180
Then I'll set up my current one and then I'll pass in the name.

97
00:07:03,720 --> 00:07:12,030
So in here, of course, if I want to access that particular variable, I would need to go with a name

98
00:07:12,180 --> 00:07:12,730
like so.

99
00:07:13,110 --> 00:07:15,180
So that's how I'm accessing right now.

100
00:07:15,480 --> 00:07:22,950
So I'm mapping over and I'm saying, yeah, get me to having one and then I'm going back to a JavaScript.

101
00:07:22,950 --> 00:07:28,220
Remember, that was the setup where essentially we were sending up the name.

102
00:07:28,560 --> 00:07:36,450
So now of course, if I check it out my value, then this will be already different than I had before.

103
00:07:36,750 --> 00:07:38,460
Before that, I had undefined.

104
00:07:38,880 --> 00:07:44,640
Now, essentially, you can see that I'm getting something interesting now that something interesting

105
00:07:45,030 --> 00:07:46,410
is my having one.

106
00:07:46,710 --> 00:07:50,540
Now, what I'm trying to say over here is, by the way, you know what?

107
00:07:50,580 --> 00:07:53,030
I want to return to new names.

108
00:07:53,340 --> 00:07:58,380
So if we will go back and if will say new names.

109
00:07:59,400 --> 00:08:05,870
You'll see that now I have John, Peter and Susan, don't worry about this warning, we will fix it.

110
00:08:06,420 --> 00:08:15,390
But the more important part is here that yes, in react we can right away render Vatterott.

111
00:08:15,420 --> 00:08:18,530
However, that right, of course, cannot be objects.

112
00:08:18,900 --> 00:08:24,180
So if you're going to have objects, you will have some problems and errors and all that power if it's

113
00:08:24,180 --> 00:08:25,380
just a simple string.

114
00:08:25,410 --> 00:08:26,190
Yes, of course.

115
00:08:26,460 --> 00:08:35,130
You can render, however, is going to make way more sense if we will wrap those values in something

116
00:08:35,340 --> 00:08:36,180
more meaningful.

117
00:08:36,270 --> 00:08:39,000
In this case, of course, that is Kangwon.

118
00:08:39,330 --> 00:08:47,190
But in the next video, we'll take a look at how we can iterate over the array that has the object and

119
00:08:47,190 --> 00:08:49,110
instead of just adding one.

120
00:08:49,500 --> 00:08:56,210
Now, I would want to return a component for each and every item, not a heading one, not of having

121
00:08:56,250 --> 00:08:59,580
two or whatever, but the actual component.