Original subtitles

Now that we learned about props,

we're basically done with our first custom component.

This expense item component is now reusable

and we can use this props concept to configure it

differently every time that we're using it.

So that the four times we're using ExpenseItem here

we're also getting a different output four times.

I also just wanna emphasize again,

that here we are indeed setting the values

for the props dynamically

with this single curly brace syntax

but we could also just have a hard coded value

like this here if that is what we needed.

So props are not limited to dynamically set values.

We can do that,

but we don't have to.

The main idea behind props is always the same though.

We wanna make sure that we can pass data into our components

to make them configurable and reusable.

Now let's continue working on that expense item component

and let's continue working on that date.

Because at the moment this is clearly not too pretty,

not too human readable.

And instead of showing it like this,

I instead wanna have this calender like look

which you see here in this preview.

I wanna have my date look like that.

And therefore of course we need to change that HTML code,

that JSX code

and I'm using these terms interchangeably as well.

We need to change that which is responsible

for outputting that date.

And here to build such a calender look,

we could say that inside of that main div

which should hold the overall date element,

we wanna have free individual divs like this,

where the top most div is responsible

for outputting the month.

The middle div is responsible for outputting the year

and the bottom div then shows the date.

That's something we could do.

And, of course, for that we wanna extract month, year

and day from the incoming date.

So from that date prop which we're setting.

For that here for the month,

we can output a value dynamically and access props.date,

and now what?

How can we now output the month here?

Well, we can use a built-in method which is

accessible on all date objects in JavaScript.

We can call the toLocaleString method.

Now this is not a React specific method.

You can Google for JS toLocaleString

to find an official article on this method.

And this method simply helps you with outputting dates

in human readable formats.

And you can simply call it and then pass

in two arguments where the first argument

is basically the language and here I'll use en-US

to go with English.

And then the second argument is an object

where you configure how specifically

that date should be formatted.

And here we got different options

where you can find more details in that article

which you can find.

Here you can learn more about the various ways

of configuring this and using this.

And here we can set month to long for example.

That's one of the provided options

or one of the supported options.

And if we do that and save this,

we see that August and March and June are being output here.

So that we got a human readable way

of outputting that month.

Now, doing that all in line here

in that JSX code clearly works.

As I mentioned earlier,

when I introduced this syntax,

you can have expressions like this between the curly braces

but it is considered a better practice,

and it leads to cleaner code.

If you extract logic like that,

and don't put it into your JSX code,

but instead you create a separate helper variable

or a constant.

Something like month here

which simply holds that value.

And then here between your curly braces in the JSX code

you just point at that helper variable or a constant.

By doing it like this you keep your JSX code lean

and you have your more complex logic in the rest

of this function so that this overall is easier to read.

And now we can do something similar for the day

and the year.

For the day we can access props.date.toLocaleString en-US

and then here passing a configuration where we say

that we wanna format just the day

and output it in a two digit format.

And we can add a year helper constant

where we access props.date

and then actually just access get full year

which is another built-in method

which just extracts the year as a four digit number.

And now we can use these helper constants

to output their values like this in our JSX code.

And if we do that and save that file,

now we see the month,

the year and also the day in the month.

And that's the raw data which I wanna have here.

Now, of course, one crucial thing is missing

and that would be the styling.

But before we add that,

let's talk about splitting components.