All language subtitles for 074 PropTypes - Images.en_US

The first let's start dealing with those problems and what's really cool as far as the prop that we

don't need to install any extra package is coming in right away by default when we set up create react

app and we go with prop pipes and then from and the package is exactly the same.

It is called prop them.

So notice how this one is with an application and that is done on purpose because in order to set up

prop types, we'll have to set up a prop that's property on the component.

So we go with the name of the component.

In this case it is a product and then we go with prop types.

So that is the name of the property.

Keep in mind, this is an import from the package and then this is the property on the component that

is always going to be there.

And then we just say, hey, listen, what kind of props are we getting?

So if I have image, name and price, then the same way in this object, I'm going to say that I'm going

to be looking for a prop and then I need to run my import, the prop types.

And then, of course, we have multiple properties, whether that is a string, no object or whatever,

justifiably so.

In my case, I know that image is going to be what?

Well, it's going to be an object, correct, so I go with Parap types, then I go with object, and

then since I would want Propp types to yell and scream if something's missing, we also add this is

required.

And effectively for every prop that you have, you would want to do the same thing.

In my case, I have name and price, so just copy here than since it is their object.

I just need a comma.

Of course, changed the names so I'll change it to name.

And also change it to rape right now, in this case, of course, I'm not looking for the object, I'm

looking for string.

Like I said, we can add whatever value value would want.

And here we go with no now, since I set them up as required, which you'll notice in the council now,

we don't need to go and manually check and say, hey, listen, is one of them without the image and

price, because I can clearly see that in my control where I have the warning that says failed pop type

prop image is marked as required, but then the value is undefined.

Now, unfortunately, it doesn't point me back to that specific product, but at least it tells me,

hey, listen, there's something off.

You need to do something because the props that you are expecting well, in one of the items, they

are missing.

So that's step number one.

Now, the next thing that we can do is start using either the short circuit operators or we can set

up default props.

So first, let me show you how we would set up a default props.

And then from then we'll take a look at the short circuit operators as well and the way we set up default

props, simply because I don't want those big fat errors if the image is missing is like so where we

go with product and then the property name is default props and it's as straightforward as it gets where

again, I write my props, by the way, here I need to have a equals sign.

And then, of course, what is going to be a default prop if that prop is missing.

So I go here with default name.

If the name is missing, then I go with price.

Now for the price, I'm just going to go with three ninety nine just in case it is missing.

Remember the last one also had the price missing and then we have the image shown here.

I'm going to go with image, but it would help of course if I would show some kind of image.

Correct.

So that could be either you are or in our case, if we check out our project, we should see the assets

folder.

So right next to Turrill, notice we have the assets folder and in there I have default hyphen image.

And this is going to be the case where I'll also show you how we can import images into our components

when we work with create react that.

So what we would want to do in that file, in the component where we want to use, we're going to go

import, then we need to give it some kind of name.

So in my case, I'm going to give it somewhat explicit name and somewhat long.

I'm going to go with default image and then we need to navigate to that folder.

So this is going to be three levels up because, of course, now we're in the product.

So we need to go first with the proper types vantages aureole and eventually we need to be in source.

And this is where we look for assets.

So we go to that and then we leave one folder, then that next one, and then finally we arrive at assets.

And then since it is not a JavaScript file, we need to go with default.

And then hyphen.

Image and then Japan.

So essentially, you need to have a full path, including the extension, OK?

Hopefully that is clear.

And now, of course, what I could do is just say default image.

So if the image is missing, then of course, this is going to be set up as a default image.

And now what are we doing next?

Well, now I can save.

And of course, I can try to on comment so I don't comment and of course, I can see something beautiful.

So that is not that bad.

I can see that I have all these products.

OK, good, good, good.

And by the way, there's extra single product that I don't need.

And then for all the products that have those properties, life is great.

But then the one that is missing, remember the last one, not only the image was missing, but also

the price was missing.

Now I can see that.

I see that default price.

So that's already a good start.

However, there's one more problem where now, of course, this image is an object.

Correct.

So even though I set up a default value for the image, when I'm going with image that you are all well,

I still cannot see the image.

Why?

Well, because there is no you are property on the image that I'm providing.

So we'll also need to take a look at how we can use short circuit operators in order to fix that.

Now, before we go any further down, I would just want to showcase that as far as the image we can

import it in any file we would want.

So if we go back to index and if I'll just copy and paste the path, because, of course, it's going

to be exactly the same.

And if I want to place my image, I'm just going to go with image and source.

And then, of course, we're going with the default image just to show kids that each and every time

you'd want you use it.

And by the way, I need to place it above the URL.

That's why it's not working.

Then of course, I can use my image again.

Same setup is going to be for every component so you can set up your images.

And then as far as the import, you just need to give it some kind of name.

And then, of course, the full path because it is not a jobs file.

So that should cover my images and I'll just comment them out for your reference.

But now it's finally deal with this product.