1 00:00:00,210 --> 00:00:06,210 The first let's start dealing with those problems and what's really cool as far as the prop that we 2 00:00:06,210 --> 00:00:12,930 don't need to install any extra package is coming in right away by default when we set up create react 3 00:00:12,940 --> 00:00:20,070 app and we go with prop pipes and then from and the package is exactly the same. 4 00:00:20,340 --> 00:00:21,680 It is called prop them. 5 00:00:22,170 --> 00:00:29,340 So notice how this one is with an application and that is done on purpose because in order to set up 6 00:00:29,340 --> 00:00:34,500 prop types, we'll have to set up a prop that's property on the component. 7 00:00:34,770 --> 00:00:37,590 So we go with the name of the component. 8 00:00:37,770 --> 00:00:42,710 In this case it is a product and then we go with prop types. 9 00:00:43,050 --> 00:00:45,370 So that is the name of the property. 10 00:00:45,720 --> 00:00:53,640 Keep in mind, this is an import from the package and then this is the property on the component that 11 00:00:53,640 --> 00:00:54,570 is always going to be there. 12 00:00:54,960 --> 00:00:59,150 And then we just say, hey, listen, what kind of props are we getting? 13 00:00:59,550 --> 00:01:06,480 So if I have image, name and price, then the same way in this object, I'm going to say that I'm going 14 00:01:06,480 --> 00:01:12,890 to be looking for a prop and then I need to run my import, the prop types. 15 00:01:13,140 --> 00:01:19,800 And then, of course, we have multiple properties, whether that is a string, no object or whatever, 16 00:01:19,800 --> 00:01:20,940 justifiably so. 17 00:01:20,940 --> 00:01:24,150 In my case, I know that image is going to be what? 18 00:01:25,030 --> 00:01:31,810 Well, it's going to be an object, correct, so I go with Parap types, then I go with object, and 19 00:01:31,810 --> 00:01:39,490 then since I would want Propp types to yell and scream if something's missing, we also add this is 20 00:01:39,670 --> 00:01:40,300 required. 21 00:01:40,570 --> 00:01:45,210 And effectively for every prop that you have, you would want to do the same thing. 22 00:01:45,630 --> 00:01:51,930 In my case, I have name and price, so just copy here than since it is their object. 23 00:01:51,940 --> 00:01:53,380 I just need a comma. 24 00:01:53,660 --> 00:01:56,920 Of course, changed the names so I'll change it to name. 25 00:01:58,150 --> 00:02:03,880 And also change it to rape right now, in this case, of course, I'm not looking for the object, I'm 26 00:02:03,880 --> 00:02:04,950 looking for string. 27 00:02:05,440 --> 00:02:09,400 Like I said, we can add whatever value value would want. 28 00:02:09,730 --> 00:02:17,710 And here we go with no now, since I set them up as required, which you'll notice in the council now, 29 00:02:17,710 --> 00:02:24,880 we don't need to go and manually check and say, hey, listen, is one of them without the image and 30 00:02:24,880 --> 00:02:30,850 price, because I can clearly see that in my control where I have the warning that says failed pop type 31 00:02:31,180 --> 00:02:36,340 prop image is marked as required, but then the value is undefined. 32 00:02:36,670 --> 00:02:42,730 Now, unfortunately, it doesn't point me back to that specific product, but at least it tells me, 33 00:02:42,730 --> 00:02:45,040 hey, listen, there's something off. 34 00:02:45,430 --> 00:02:53,890 You need to do something because the props that you are expecting well, in one of the items, they 35 00:02:53,890 --> 00:02:54,560 are missing. 36 00:02:54,940 --> 00:02:56,210 So that's step number one. 37 00:02:56,650 --> 00:03:05,560 Now, the next thing that we can do is start using either the short circuit operators or we can set 38 00:03:05,560 --> 00:03:06,880 up default props. 39 00:03:07,220 --> 00:03:10,660 So first, let me show you how we would set up a default props. 40 00:03:10,960 --> 00:03:18,010 And then from then we'll take a look at the short circuit operators as well and the way we set up default 41 00:03:18,010 --> 00:03:25,900 props, simply because I don't want those big fat errors if the image is missing is like so where we 42 00:03:25,900 --> 00:03:34,510 go with product and then the property name is default props and it's as straightforward as it gets where 43 00:03:34,510 --> 00:03:39,190 again, I write my props, by the way, here I need to have a equals sign. 44 00:03:39,520 --> 00:03:44,240 And then, of course, what is going to be a default prop if that prop is missing. 45 00:03:44,530 --> 00:03:46,260 So I go here with default name. 46 00:03:47,050 --> 00:03:49,800 If the name is missing, then I go with price. 47 00:03:50,050 --> 00:03:55,550 Now for the price, I'm just going to go with three ninety nine just in case it is missing. 48 00:03:55,580 --> 00:04:01,210 Remember the last one also had the price missing and then we have the image shown here. 49 00:04:01,210 --> 00:04:09,190 I'm going to go with image, but it would help of course if I would show some kind of image. 50 00:04:09,580 --> 00:04:10,020 Correct. 51 00:04:10,360 --> 00:04:18,550 So that could be either you are or in our case, if we check out our project, we should see the assets 52 00:04:18,550 --> 00:04:19,090 folder. 53 00:04:19,510 --> 00:04:26,840 So right next to Turrill, notice we have the assets folder and in there I have default hyphen image. 54 00:04:27,760 --> 00:04:35,380 And this is going to be the case where I'll also show you how we can import images into our components 55 00:04:35,380 --> 00:04:37,750 when we work with create react that. 56 00:04:38,260 --> 00:04:43,600 So what we would want to do in that file, in the component where we want to use, we're going to go 57 00:04:43,720 --> 00:04:46,760 import, then we need to give it some kind of name. 58 00:04:47,080 --> 00:04:50,680 So in my case, I'm going to give it somewhat explicit name and somewhat long. 59 00:04:50,950 --> 00:04:55,520 I'm going to go with default image and then we need to navigate to that folder. 60 00:04:55,720 --> 00:04:59,470 So this is going to be three levels up because, of course, now we're in the product. 61 00:04:59,770 --> 00:05:06,400 So we need to go first with the proper types vantages aureole and eventually we need to be in source. 62 00:05:06,640 --> 00:05:08,290 And this is where we look for assets. 63 00:05:08,560 --> 00:05:16,600 So we go to that and then we leave one folder, then that next one, and then finally we arrive at assets. 64 00:05:16,900 --> 00:05:22,270 And then since it is not a JavaScript file, we need to go with default. 65 00:05:23,110 --> 00:05:24,190 And then hyphen. 66 00:05:25,210 --> 00:05:27,050 Image and then Japan. 67 00:05:27,190 --> 00:05:33,200 So essentially, you need to have a full path, including the extension, OK? 68 00:05:33,490 --> 00:05:34,720 Hopefully that is clear. 69 00:05:34,940 --> 00:05:38,630 And now, of course, what I could do is just say default image. 70 00:05:38,950 --> 00:05:47,630 So if the image is missing, then of course, this is going to be set up as a default image. 71 00:05:47,860 --> 00:05:49,870 And now what are we doing next? 72 00:05:50,140 --> 00:05:51,460 Well, now I can save. 73 00:05:52,410 --> 00:06:01,170 And of course, I can try to on comment so I don't comment and of course, I can see something beautiful. 74 00:06:01,490 --> 00:06:02,660 So that is not that bad. 75 00:06:03,000 --> 00:06:05,670 I can see that I have all these products. 76 00:06:06,000 --> 00:06:07,410 OK, good, good, good. 77 00:06:07,440 --> 00:06:10,860 And by the way, there's extra single product that I don't need. 78 00:06:11,290 --> 00:06:15,420 And then for all the products that have those properties, life is great. 79 00:06:15,840 --> 00:06:23,100 But then the one that is missing, remember the last one, not only the image was missing, but also 80 00:06:23,130 --> 00:06:24,660 the price was missing. 81 00:06:24,900 --> 00:06:25,800 Now I can see that. 82 00:06:25,800 --> 00:06:28,100 I see that default price. 83 00:06:28,470 --> 00:06:30,190 So that's already a good start. 84 00:06:30,600 --> 00:06:36,450 However, there's one more problem where now, of course, this image is an object. 85 00:06:36,870 --> 00:06:37,350 Correct. 86 00:06:37,620 --> 00:06:45,870 So even though I set up a default value for the image, when I'm going with image that you are all well, 87 00:06:46,020 --> 00:06:47,400 I still cannot see the image. 88 00:06:47,580 --> 00:06:48,000 Why? 89 00:06:48,270 --> 00:06:53,410 Well, because there is no you are property on the image that I'm providing. 90 00:06:54,150 --> 00:07:01,070 So we'll also need to take a look at how we can use short circuit operators in order to fix that. 91 00:07:01,380 --> 00:07:07,980 Now, before we go any further down, I would just want to showcase that as far as the image we can 92 00:07:07,980 --> 00:07:09,970 import it in any file we would want. 93 00:07:09,990 --> 00:07:15,990 So if we go back to index and if I'll just copy and paste the path, because, of course, it's going 94 00:07:15,990 --> 00:07:17,010 to be exactly the same. 95 00:07:17,340 --> 00:07:22,040 And if I want to place my image, I'm just going to go with image and source. 96 00:07:22,350 --> 00:07:27,450 And then, of course, we're going with the default image just to show kids that each and every time 97 00:07:27,450 --> 00:07:29,200 you'd want you use it. 98 00:07:29,220 --> 00:07:31,740 And by the way, I need to place it above the URL. 99 00:07:31,880 --> 00:07:32,960 That's why it's not working. 100 00:07:33,300 --> 00:07:36,360 Then of course, I can use my image again. 101 00:07:36,780 --> 00:07:42,300 Same setup is going to be for every component so you can set up your images. 102 00:07:42,660 --> 00:07:46,340 And then as far as the import, you just need to give it some kind of name. 103 00:07:46,620 --> 00:07:50,050 And then, of course, the full path because it is not a jobs file. 104 00:07:50,460 --> 00:07:56,520 So that should cover my images and I'll just comment them out for your reference. 105 00:07:56,520 --> 00:08:00,150 But now it's finally deal with this product.