1
00:00:00,420 --> 00:00:06,420
We have the product, I have some problems that are there, some that are not technically ours able

2
00:00:06,720 --> 00:00:11,690
to fix, some want a lot when I talked the default props.

3
00:00:12,060 --> 00:00:16,160
But there's also another way how we can set up those default props.

4
00:00:16,530 --> 00:00:19,680
So how common is that for your reference?

5
00:00:19,980 --> 00:00:22,430
And I'll take a look at another way now.

6
00:00:22,500 --> 00:00:25,550
Yes, there's going to be a big fat complaint.

7
00:00:25,950 --> 00:00:29,740
But first, I would want to showcase that we can use or operate.

8
00:00:30,210 --> 00:00:37,590
So if I know that price might be missing, what I could say is get me the price.

9
00:00:37,950 --> 00:00:43,980
If the price is not there, then we use or operator and then we can add the default value.

10
00:00:44,310 --> 00:00:46,590
So in this case, I can go with three ninety nine.

11
00:00:47,040 --> 00:00:52,800
Now the problem is going to be that we'll still have this error, because when we check for this, you

12
00:00:52,800 --> 00:00:55,350
are a property on the image.

13
00:00:55,360 --> 00:01:00,180
We cannot use this or I can say here, get me the property on the object.

14
00:01:00,180 --> 00:01:04,590
But if the image is undefined, well, this will make sense.

15
00:01:04,890 --> 00:01:11,340
So even though you might think that I could just check for default image this way, it's not going to

16
00:01:11,340 --> 00:01:17,690
fix the situation because JavaScript still complains that we're trying to access the property on the

17
00:01:17,720 --> 00:01:20,970
on the phone, which, of course, is going to be our last project.

18
00:01:21,480 --> 00:01:27,830
And this is where the end operator comes into play, where we can set up some kind of variable.

19
00:01:28,290 --> 00:01:35,220
In my case, that is going to be your URL where I can say, you know what, if the image is there,

20
00:01:35,550 --> 00:01:39,310
only then get me back the euro.

21
00:01:39,930 --> 00:01:43,590
So if the image is there, then get me your URL.

22
00:01:43,890 --> 00:01:53,160
If the image is not there, well, that is just going to be defined so that what we're doing is we're

23
00:01:53,160 --> 00:01:55,500
only checking for you our URL.

24
00:01:55,980 --> 00:02:02,250
If the image exists, if the image doesn't exist, then we're not even checking it.

25
00:02:02,670 --> 00:02:05,760
So the last product, of course, it doesn't have the image.

26
00:02:06,150 --> 00:02:07,090
It is undefined.

27
00:02:07,380 --> 00:02:11,360
So if that is the case, we're not even checking for Arturo.

28
00:02:11,730 --> 00:02:20,070
So in that case, you will notice that I nicely display that default image because for all the products,

29
00:02:20,430 --> 00:02:22,140
I'm checking for the image image there.

30
00:02:22,290 --> 00:02:29,340
And then I get back the URL and then of course I display the URL or here how or for the last one, since

31
00:02:29,340 --> 00:02:35,460
the image is not there, I'm not checking for the property that is not on the object, so I don't get

32
00:02:35,460 --> 00:02:36,060
the error.

33
00:02:36,600 --> 00:02:38,760
And then in here I say, well, you're not.

34
00:02:39,650 --> 00:02:45,550
If this is falsie than just display the default image and of course, I can do the same thing here for

35
00:02:45,550 --> 00:02:48,820
the name, if I would want, I could use my or operator.

36
00:02:49,190 --> 00:02:52,940
So that's how we can use Parap types and react.

37
00:02:53,390 --> 00:03:01,460
And before you ask the question, well, why we won't use it all throughout the project as well as reminding

38
00:03:01,460 --> 00:03:08,330
of the tutorial, the simple answer is that, well, it is adding too much code and in my opinion,

39
00:03:08,660 --> 00:03:10,530
it just gets a little bit messy.

40
00:03:11,390 --> 00:03:18,890
So since our goal is to learn whether or not is building the project or working on a specific part of

41
00:03:18,890 --> 00:03:25,790
tutorial, that's why I will avoid using a bunch of these properties, because in my opinion, they

42
00:03:25,790 --> 00:03:29,810
just make our files bigger and harder to read.

43
00:03:30,110 --> 00:03:36,890
Now, one last thing before I let you go is the fact that, of course, you can set it up the proper

44
00:03:36,890 --> 00:03:39,770
types using the snippets as well.

45
00:03:40,220 --> 00:03:44,780
So I'll just create some testing file here, testing G.S..

46
00:03:44,780 --> 00:03:52,300
And if you would want to add Parap types, you just go here with this B, so you have R, A, F, C,

47
00:03:52,640 --> 00:03:55,280
and money is going to start for export.

48
00:03:55,580 --> 00:04:02,990
But then if you add this P, you'll also right away get this type and then of course you export the

49
00:04:03,230 --> 00:04:04,670
testing component.

50
00:04:05,000 --> 00:04:06,200
And then one more thing.

51
00:04:06,200 --> 00:04:10,490
If you want to have a shortcut where you're setting up the prompts.

52
00:04:10,490 --> 00:04:16,970
So for example, I could go with namedrop and then if you want that is required, then you go with Peaty

53
00:04:17,240 --> 00:04:20,420
and then whether that is an array or string or whatever.

54
00:04:20,750 --> 00:04:26,660
So in my case, I'm going to go with a and if you want or required, then you just go with R.

55
00:04:26,870 --> 00:04:29,000
And I noticed you have Propp types.

56
00:04:29,000 --> 00:04:29,560
All right.

57
00:04:29,810 --> 00:04:31,500
And that is required.

58
00:04:31,790 --> 00:04:34,070
So those are just the shortcuts that you can use.

59
00:04:34,250 --> 00:04:42,410
And those are used cases for Propp types where they first allow you to see which props are missing.

60
00:04:42,710 --> 00:04:49,400
And then when you combine them with short circuit operators, you can just make sure that if the prop

61
00:04:49,400 --> 00:04:52,910
value is not there, you have some kind of default value.