- [Instructor] So, right now, if I were to pass along,
most of the information, leaving out something,
like the conversion or the precision,
the application really wouldn't know what to do.
So, if I don't pass along the precision,
then, it's just going to ignore the cent here,
which is not exactly what I want.
So, what I need to do is find a way
of passing along default values.
So, let me show you that when you pass along props,
you can pass them along as either an array of elements
or you can pass along an object.
And the object is a little more flexible,
because it allows you to specify things,
like the type that each of the elements should be.
And you can do this in other places as well.
So, you can actually say,
and let's get rid of all these quotes,
because it's going to be an object,
in each of the elements here, we're going to get.
You know you can use this notation,
object notation here for the props.
And then, for each one of the props,
you can specify a type if you want to.
And you can specify things like whether
or not the element is required,
or in the case of something like the prefix,
we can pass along sort of a sub object.
And in here, we can specify that this
is going to be a string, but then,
we can also specify the default.
So, there's a few more options that you can pass along.
You can see that it's useful, that if somebody
doesn't include the prefix, it's
going to assume that they mean dollars.
So, the same thing for a precision,
it would be useful if this was an object type
of number in default.
It's going to be two, and then, for a conversion,
again, another object, and this
is going to have a type of number,
and a default of two.
So, now, if I forget to type in any of these,
I've sort of set them up for success.
So, let's see, you can see that now,
it's putting in the decimal points, and,
I can even get rid of this,
and the decimal points should receive a value.
So, I don't even have to like say that I didn't
want to use euros, so, I'm not
including a prefix or a conversion.
I just want to include a price like this.
Then, it's going to assume that it is dollars.
And hold on a second, that doesn't seems right.
Looks like it multiplied it on, so, let's check this out.
So, precision, yeah, the conversion
should have a one of a default.
So, I just wanted to show you that if you
pull up the console here you're going to get a warning,
because we are specifying that these things
have to be specific types, which means that if you
pass them along as the wrong types,
it's going to give you this warning.
So, here, it's expecting a number,
but you're getting a string, which just means that you
have to remember to type things properly when you pass them.
So, in this case, we just need to make sure that we
pass this along as a number, and typing,
typecasting, can be pretty good.
Let's go ahead and clear this out,
and we'll put in a little space here,
just to cause a read out.
Now, we don't get a warning anymore.
Our stuff still works, but if you are,
be very specific in your scripts about the types,
that the props are expected to be in.
You need to make sure that you pass them along properly.
So, you can see that this creates a component that
is a lot more flexible than our filter was.
And we can very easily create some variables
in our application that allows you to format
all the prices and do the conversions automatically.
So, this is a much better way of handling,
something like pricing.