All language subtitles for 073 PropTypes - Setup.en_US

Nice work.

Next, we have Propp types and effectively Propp types allow us to validate our props.

So the props that we're passing into component and in order to get up and running with our example,

of course, we will need to import from folder number 10, because, again, we're looking for the setup.

And then as you can see here, I have the energy source, meaning the main entry.

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

online tutorial.

Of course.

Then we're looking for the folder number 10, the prototype and then forward slash set up and we are

in good shape.

So right after the heading to or not, let me remove it and right here set up.

Let me close my component and I should see the product.

I'm on the device with a single product text.

So what's happening over here and what we're trying to achieve?

Of course, we would need to navigate first to the index dryer's.

And what you'll notice is the imports, so we have import for the product component, which essentially

is where we're going to do most of our work.

Then we have our use fetch custom.

And if you didn't watch the last example, the last topic, then please do so, because I'm not going

to go over what's happening with uSwitch, with our customers.

OK, so we import from the folder, from the final folder in this case.

And then of course, I have the URL which I pass into the U.S fetch.

And that's the nice thing about the custom hook, because now every time in a project when I want to

fetch some letter, I can simply use my use fetch then passing the URL and I know that I'll get back

to things, I'll get back to loading as well as the product, not my case.

Notice how I don't need the loading so I'm not using it, so I'm just getting the product again.

This is just to emphasize the cool thing of custom hooks where now of course, I don't need to set up

you state.

I don't need to set up use the fact everything has already done in the use fetch custom.

Now, with that said, of course I'm grabbing the product out of my return and then I have the section.

With a class name of product that I'm iterating over those products, and then for each and every product,

I'm returning a product component and then, of course, we need to pass in the Kiprop that is equal

to a product that I deem.

And I'll show you the API in a second.

And then we do the object spread operator where I pass in all the properties from each and every product

into the product component.

Beautiful.

Now I guess we'll start by checking out the API and essentially are set up this API myself.

Just so we can have the example, and of course, what you could do is, again, navigate to a browser

and then just copy and paste you URL and you'll see that again, we have some kind of array.

And then each and every item in the array is an object which represents parodic.

And and there we have the added property.

We have the name.

We have some kind of image.

Of course, if you want, you can open this up.

And then we also have the price.

So far so good, everything that we have covered already before.

And we can probably already imagine that in that product component.

Well, we'll have to access those properties one by one.

Correct.

Only to have the name.

We'll need to have an image with the URL more specifically as well as the price.

So let's try it out and let's see where Propp types come in handy.

So I'll open up the sidebar and I'll check my product.

Like I said, at the moment, the single thing that I'm returning is just a single product text.

But of course, I would want to change that around an axis of those properties, because I know that

I'm passing the amendment correct.

In the next year, we do pass them in.

So it's not like they're missing, but there's going to be a gotcha.

And I'll look for my image.

I'll look for my name and I'll look for my price.

The number, of course, in the return.

Well, I want to make it a bit more interesting where I'm going to return article with the class of

product that still stays the same.

But then I'm going to look for heading for and I'm going to say, you know what?

Show me the name.

Get me whatever is the name of the product.

And so far so good.

We have Ethopia so far all the way to a surface.

All right.

So that work, we got our probe by the name of the name and of course, we can display how.

However, what do you think is going to happen when we try to do the same thing with a price?

So let me access here the price.

And what you'll notice that all of them have some kind of price, but the last one for some reason displays

nothing, and that some reason is simply because English API, well, all the objects have those properties

apart from the last one.

And I did this on purpose because if you're ever worked with APIs, you know that you're not always

guaranteed some kind of value.

Yeah, for the most part.

Of course, if you have an array of objects, the values for the properties will be there.

But once in a while, with some images, with some prices, some of the values might be missing.

So here the problem is that I'm relying on the fact that I will for sure have this price.

But the question is, well, what if on the data that I'm iterating over that property so that value

is not there?

What then?

Because, yeah, it's nice to say, yeah, I would like to get the price, but if the price is not there,

what are my next steps?

And what's even worse is because we have the image and image purposely.

I set it up as an object in the object.

I'm looking for the euro.

Now what do we know about JavaScript?

If I'll try to access the euro property on the image that is undefined in my last object, you'll see

that will get a big, fat error.

So what I'm trying to showcase that even if ninety nine out of your hundred items have all the properties,

if one of them is going to be missing, since you're checking for the property that is in the object,

you'll get a big fat error.

And of course, you'll have to deal with that showcase that I'm going to go here with an image.

And then what I would like is, of course, set up my return.

Then I have my source and then I remember we need to go for image and then Dot, you are all right.

And of course, for the alternative will also go with a name.

So once I save like I said, there's going to be a big fat error.

Now, why is that error?

Well, it's simply there because I already mentioned a few times that we are getting the property that

is on the object.

And even though for rest of the items, image property is right there, the last one doesn't have it.

And since I'm checking the property on on the find cause reacts complaining.

And if you ever see this kind of setup, first of all, I would suggest not freaking out.

And what I mean by that, a lot of times I see students right away going for questioning and saying,

hey, listen, there's something wrong with my project because, well, I cannot access the property.

I have this undefined.

If you ever get this case, which you simply need to do, is just make sure that you are turning some

kind of static value.

And then one by one, you start checking, hey, listen, what is happening with my property now?

Why do I want to return a static value?

Well, because, of course, I don't want to access them dynamically because that will always throw

the ear.

So always, always if you ever run into some kind of issues like that, I would suggest in this case

I'm getting out and then saying some kind of value, some kind of return.

It's going to be heading for and then again, back to single product.

I'll save it, and, of course, I would want to check.

Hey, listen, what is happening?

Where is my image?

Where's my name and where is my price?

So once we go back, of course, I'm going to do that in the bigger browser window and I can see that

something's off.

So, yeah, for some of them, I have the values, but then I see those undefined.

And of course, now I would want to set up the proper types that essentially would check that for me.

And the second thing that I would want to do is set up some kind of default values.