We have the product, I have some problems that are there, some that are not technically ours able
to fix, some want a lot when I talked the default props.
But there's also another way how we can set up those default props.
So how common is that for your reference?
And I'll take a look at another way now.
Yes, there's going to be a big fat complaint.
But first, I would want to showcase that we can use or operate.
So if I know that price might be missing, what I could say is get me the price.
If the price is not there, then we use or operator and then we can add the default value.
So in this case, I can go with three ninety nine.
Now the problem is going to be that we'll still have this error, because when we check for this, you
are a property on the image.
We cannot use this or I can say here, get me the property on the object.
But if the image is undefined, well, this will make sense.
So even though you might think that I could just check for default image this way, it's not going to
fix the situation because JavaScript still complains that we're trying to access the property on the
on the phone, which, of course, is going to be our last project.
And this is where the end operator comes into play, where we can set up some kind of variable.
In my case, that is going to be your URL where I can say, you know what, if the image is there,
only then get me back the euro.
So if the image is there, then get me your URL.
If the image is not there, well, that is just going to be defined so that what we're doing is we're
only checking for you our URL.
If the image exists, if the image doesn't exist, then we're not even checking it.
So the last product, of course, it doesn't have the image.
It is undefined.
So if that is the case, we're not even checking for Arturo.
So in that case, you will notice that I nicely display that default image because for all the products,
I'm checking for the image image there.
And then I get back the URL and then of course I display the URL or here how or for the last one, since
the image is not there, I'm not checking for the property that is not on the object, so I don't get
the error.
And then in here I say, well, you're not.
If this is falsie than just display the default image and of course, I can do the same thing here for
the name, if I would want, I could use my or operator.
So that's how we can use Parap types and react.
And before you ask the question, well, why we won't use it all throughout the project as well as reminding
of the tutorial, the simple answer is that, well, it is adding too much code and in my opinion,
it just gets a little bit messy.
So since our goal is to learn whether or not is building the project or working on a specific part of
tutorial, that's why I will avoid using a bunch of these properties, because in my opinion, they
just make our files bigger and harder to read.
Now, one last thing before I let you go is the fact that, of course, you can set it up the proper
types using the snippets as well.
So I'll just create some testing file here, testing G.S..
And if you would want to add Parap types, you just go here with this B, so you have R, A, F, C,
and money is going to start for export.
But then if you add this P, you'll also right away get this type and then of course you export the
testing component.
And then one more thing.
If you want to have a shortcut where you're setting up the prompts.
So for example, I could go with namedrop and then if you want that is required, then you go with Peaty
and then whether that is an array or string or whatever.
So in my case, I'm going to go with a and if you want or required, then you just go with R.
And I noticed you have Propp types.
All right.
And that is required.
So those are just the shortcuts that you can use.
And those are used cases for Propp types where they first allow you to see which props are missing.
And then when you combine them with short circuit operators, you can just make sure that if the prop
value is not there, you have some kind of default value.