1
00:00:00,330 --> 00:00:00,920
Nice work.

2
00:00:01,410 --> 00:00:08,550
Next, we have Propp types and effectively Propp types allow us to validate our props.

3
00:00:08,700 --> 00:00:16,650
So the props that we're passing into component and in order to get up and running with our example,

4
00:00:17,010 --> 00:00:23,590
of course, we will need to import from folder number 10, because, again, we're looking for the setup.

5
00:00:23,940 --> 00:00:28,830
And then as you can see here, I have the energy source, meaning the main entry.

6
00:00:29,160 --> 00:00:36,430
So we just need to look for the folder in the app just so we'll go with the import and set up from an

7
00:00:36,510 --> 00:00:37,290
online tutorial.

8
00:00:37,290 --> 00:00:38,060
Of course.

9
00:00:38,070 --> 00:00:45,570
Then we're looking for the folder number 10, the prototype and then forward slash set up and we are

10
00:00:45,690 --> 00:00:46,800
in good shape.

11
00:00:47,220 --> 00:00:54,480
So right after the heading to or not, let me remove it and right here set up.

12
00:00:54,930 --> 00:00:59,030
Let me close my component and I should see the product.

13
00:00:59,410 --> 00:01:04,170
I'm on the device with a single product text.

14
00:01:04,680 --> 00:01:08,590
So what's happening over here and what we're trying to achieve?

15
00:01:08,960 --> 00:01:13,170
Of course, we would need to navigate first to the index dryer's.

16
00:01:14,050 --> 00:01:21,130
And what you'll notice is the imports, so we have import for the product component, which essentially

17
00:01:21,340 --> 00:01:23,830
is where we're going to do most of our work.

18
00:01:24,250 --> 00:01:27,510
Then we have our use fetch custom.

19
00:01:28,240 --> 00:01:35,020
And if you didn't watch the last example, the last topic, then please do so, because I'm not going

20
00:01:35,020 --> 00:01:38,340
to go over what's happening with uSwitch, with our customers.

21
00:01:38,460 --> 00:01:43,540
OK, so we import from the folder, from the final folder in this case.

22
00:01:43,930 --> 00:01:48,140
And then of course, I have the URL which I pass into the U.S fetch.

23
00:01:48,460 --> 00:01:55,090
And that's the nice thing about the custom hook, because now every time in a project when I want to

24
00:01:55,090 --> 00:02:03,010
fetch some letter, I can simply use my use fetch then passing the URL and I know that I'll get back

25
00:02:03,010 --> 00:02:07,390
to things, I'll get back to loading as well as the product, not my case.

26
00:02:07,420 --> 00:02:13,870
Notice how I don't need the loading so I'm not using it, so I'm just getting the product again.

27
00:02:13,900 --> 00:02:20,140
This is just to emphasize the cool thing of custom hooks where now of course, I don't need to set up

28
00:02:20,140 --> 00:02:20,920
you state.

29
00:02:20,920 --> 00:02:27,790
I don't need to set up use the fact everything has already done in the use fetch custom.

30
00:02:28,330 --> 00:02:36,250
Now, with that said, of course I'm grabbing the product out of my return and then I have the section.

31
00:02:37,260 --> 00:02:42,720
With a class name of product that I'm iterating over those products, and then for each and every product,

32
00:02:43,020 --> 00:02:50,130
I'm returning a product component and then, of course, we need to pass in the Kiprop that is equal

33
00:02:50,130 --> 00:02:51,930
to a product that I deem.

34
00:02:52,140 --> 00:02:54,030
And I'll show you the API in a second.

35
00:02:54,330 --> 00:03:02,880
And then we do the object spread operator where I pass in all the properties from each and every product

36
00:03:03,450 --> 00:03:06,660
into the product component.

37
00:03:06,930 --> 00:03:07,500
Beautiful.

38
00:03:07,890 --> 00:03:13,970
Now I guess we'll start by checking out the API and essentially are set up this API myself.

39
00:03:14,960 --> 00:03:21,950
Just so we can have the example, and of course, what you could do is, again, navigate to a browser

40
00:03:21,980 --> 00:03:27,170
and then just copy and paste you URL and you'll see that again, we have some kind of array.

41
00:03:27,440 --> 00:03:33,170
And then each and every item in the array is an object which represents parodic.

42
00:03:33,350 --> 00:03:35,580
And and there we have the added property.

43
00:03:35,600 --> 00:03:36,460
We have the name.

44
00:03:36,770 --> 00:03:38,510
We have some kind of image.

45
00:03:38,690 --> 00:03:40,400
Of course, if you want, you can open this up.

46
00:03:40,670 --> 00:03:43,060
And then we also have the price.

47
00:03:43,580 --> 00:03:47,330
So far so good, everything that we have covered already before.

48
00:03:47,750 --> 00:03:53,660
And we can probably already imagine that in that product component.

49
00:03:54,050 --> 00:03:56,810
Well, we'll have to access those properties one by one.

50
00:03:56,810 --> 00:03:57,200
Correct.

51
00:03:57,560 --> 00:03:58,670
Only to have the name.

52
00:03:58,670 --> 00:04:04,010
We'll need to have an image with the URL more specifically as well as the price.

53
00:04:04,310 --> 00:04:09,940
So let's try it out and let's see where Propp types come in handy.

54
00:04:10,220 --> 00:04:13,760
So I'll open up the sidebar and I'll check my product.

55
00:04:13,760 --> 00:04:19,580
Like I said, at the moment, the single thing that I'm returning is just a single product text.

56
00:04:20,370 --> 00:04:25,680
But of course, I would want to change that around an axis of those properties, because I know that

57
00:04:25,680 --> 00:04:27,540
I'm passing the amendment correct.

58
00:04:27,780 --> 00:04:30,160
In the next year, we do pass them in.

59
00:04:30,720 --> 00:04:34,310
So it's not like they're missing, but there's going to be a gotcha.

60
00:04:34,710 --> 00:04:36,810
And I'll look for my image.

61
00:04:37,020 --> 00:04:40,660
I'll look for my name and I'll look for my price.

62
00:04:41,190 --> 00:04:43,190
The number, of course, in the return.

63
00:04:43,620 --> 00:04:49,470
Well, I want to make it a bit more interesting where I'm going to return article with the class of

64
00:04:49,470 --> 00:04:51,870
product that still stays the same.

65
00:04:52,260 --> 00:04:56,090
But then I'm going to look for heading for and I'm going to say, you know what?

66
00:04:56,400 --> 00:04:57,800
Show me the name.

67
00:04:58,290 --> 00:05:01,950
Get me whatever is the name of the product.

68
00:05:02,550 --> 00:05:03,830
And so far so good.

69
00:05:04,350 --> 00:05:08,970
We have Ethopia so far all the way to a surface.

70
00:05:09,750 --> 00:05:10,320
All right.

71
00:05:10,710 --> 00:05:18,340
So that work, we got our probe by the name of the name and of course, we can display how.

72
00:05:18,390 --> 00:05:23,920
However, what do you think is going to happen when we try to do the same thing with a price?

73
00:05:24,540 --> 00:05:26,430
So let me access here the price.

74
00:05:27,330 --> 00:05:35,460
And what you'll notice that all of them have some kind of price, but the last one for some reason displays

75
00:05:35,460 --> 00:05:44,520
nothing, and that some reason is simply because English API, well, all the objects have those properties

76
00:05:44,940 --> 00:05:46,130
apart from the last one.

77
00:05:46,650 --> 00:05:53,070
And I did this on purpose because if you're ever worked with APIs, you know that you're not always

78
00:05:53,070 --> 00:05:54,580
guaranteed some kind of value.

79
00:05:55,080 --> 00:05:56,530
Yeah, for the most part.

80
00:05:56,590 --> 00:06:01,230
Of course, if you have an array of objects, the values for the properties will be there.

81
00:06:01,680 --> 00:06:07,650
But once in a while, with some images, with some prices, some of the values might be missing.

82
00:06:08,100 --> 00:06:14,760
So here the problem is that I'm relying on the fact that I will for sure have this price.

83
00:06:15,330 --> 00:06:23,190
But the question is, well, what if on the data that I'm iterating over that property so that value

84
00:06:23,220 --> 00:06:24,150
is not there?

85
00:06:24,450 --> 00:06:25,010
What then?

86
00:06:25,500 --> 00:06:30,900
Because, yeah, it's nice to say, yeah, I would like to get the price, but if the price is not there,

87
00:06:31,410 --> 00:06:33,360
what are my next steps?

88
00:06:33,870 --> 00:06:39,480
And what's even worse is because we have the image and image purposely.

89
00:06:39,630 --> 00:06:42,750
I set it up as an object in the object.

90
00:06:42,750 --> 00:06:43,980
I'm looking for the euro.

91
00:06:44,550 --> 00:06:46,590
Now what do we know about JavaScript?

92
00:06:47,130 --> 00:06:56,250
If I'll try to access the euro property on the image that is undefined in my last object, you'll see

93
00:06:56,250 --> 00:06:58,060
that will get a big, fat error.

94
00:06:58,590 --> 00:07:06,450
So what I'm trying to showcase that even if ninety nine out of your hundred items have all the properties,

95
00:07:06,900 --> 00:07:12,900
if one of them is going to be missing, since you're checking for the property that is in the object,

96
00:07:13,260 --> 00:07:15,120
you'll get a big fat error.

97
00:07:15,120 --> 00:07:20,790
And of course, you'll have to deal with that showcase that I'm going to go here with an image.

98
00:07:21,120 --> 00:07:24,540
And then what I would like is, of course, set up my return.

99
00:07:24,870 --> 00:07:32,550
Then I have my source and then I remember we need to go for image and then Dot, you are all right.

100
00:07:32,880 --> 00:07:37,440
And of course, for the alternative will also go with a name.

101
00:07:37,830 --> 00:07:42,910
So once I save like I said, there's going to be a big fat error.

102
00:07:43,260 --> 00:07:44,820
Now, why is that error?

103
00:07:45,210 --> 00:07:52,490
Well, it's simply there because I already mentioned a few times that we are getting the property that

104
00:07:52,530 --> 00:07:53,340
is on the object.

105
00:07:53,880 --> 00:08:01,640
And even though for rest of the items, image property is right there, the last one doesn't have it.

106
00:08:02,250 --> 00:08:08,250
And since I'm checking the property on on the find cause reacts complaining.

107
00:08:08,490 --> 00:08:13,910
And if you ever see this kind of setup, first of all, I would suggest not freaking out.

108
00:08:14,670 --> 00:08:19,500
And what I mean by that, a lot of times I see students right away going for questioning and saying,

109
00:08:19,500 --> 00:08:25,260
hey, listen, there's something wrong with my project because, well, I cannot access the property.

110
00:08:25,290 --> 00:08:26,760
I have this undefined.

111
00:08:27,090 --> 00:08:33,900
If you ever get this case, which you simply need to do, is just make sure that you are turning some

112
00:08:33,900 --> 00:08:35,040
kind of static value.

113
00:08:35,310 --> 00:08:41,700
And then one by one, you start checking, hey, listen, what is happening with my property now?

114
00:08:41,700 --> 00:08:43,510
Why do I want to return a static value?

115
00:08:43,530 --> 00:08:48,810
Well, because, of course, I don't want to access them dynamically because that will always throw

116
00:08:48,810 --> 00:08:49,260
the ear.

117
00:08:49,680 --> 00:08:57,360
So always, always if you ever run into some kind of issues like that, I would suggest in this case

118
00:08:57,480 --> 00:09:01,650
I'm getting out and then saying some kind of value, some kind of return.

119
00:09:02,220 --> 00:09:06,060
It's going to be heading for and then again, back to single product.

120
00:09:07,000 --> 00:09:09,620
I'll save it, and, of course, I would want to check.

121
00:09:09,880 --> 00:09:11,260
Hey, listen, what is happening?

122
00:09:11,620 --> 00:09:12,850
Where is my image?

123
00:09:12,850 --> 00:09:15,850
Where's my name and where is my price?

124
00:09:16,300 --> 00:09:22,360
So once we go back, of course, I'm going to do that in the bigger browser window and I can see that

125
00:09:22,360 --> 00:09:23,290
something's off.

126
00:09:23,830 --> 00:09:28,120
So, yeah, for some of them, I have the values, but then I see those undefined.

127
00:09:28,750 --> 00:09:35,210
And of course, now I would want to set up the proper types that essentially would check that for me.

128
00:09:35,530 --> 00:09:39,670
And the second thing that I would want to do is set up some kind of default values.