Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,410 --> 00:00:04,710
Now that we learned about props,
2
00:00:04,710 --> 00:00:09,470
we're basically done with our first custom component.
3
00:00:09,470 --> 00:00:12,950
This expense item component is now reusable
4
00:00:12,950 --> 00:00:16,070
and we can use this props concept to configure it
5
00:00:16,070 --> 00:00:18,720
differently every time that we're using it.
6
00:00:18,720 --> 00:00:22,200
So that the four times we're using ExpenseItem here
7
00:00:22,200 --> 00:00:25,730
we're also getting a different output four times.
8
00:00:25,730 --> 00:00:27,570
I also just wanna emphasize again,
9
00:00:27,570 --> 00:00:31,440
that here we are indeed setting the values
10
00:00:31,440 --> 00:00:33,210
for the props dynamically
11
00:00:33,210 --> 00:00:36,490
with this single curly brace syntax
12
00:00:36,490 --> 00:00:39,500
but we could also just have a hard coded value
13
00:00:39,500 --> 00:00:42,160
like this here if that is what we needed.
14
00:00:42,160 --> 00:00:46,250
So props are not limited to dynamically set values.
15
00:00:46,250 --> 00:00:47,280
We can do that,
16
00:00:47,280 --> 00:00:48,990
but we don't have to.
17
00:00:48,990 --> 00:00:52,000
The main idea behind props is always the same though.
18
00:00:52,000 --> 00:00:55,780
We wanna make sure that we can pass data into our components
19
00:00:55,780 --> 00:00:58,913
to make them configurable and reusable.
20
00:01:00,060 --> 00:01:03,510
Now let's continue working on that expense item component
21
00:01:03,510 --> 00:01:06,130
and let's continue working on that date.
22
00:01:06,130 --> 00:01:09,950
Because at the moment this is clearly not too pretty,
23
00:01:09,950 --> 00:01:12,400
not too human readable.
24
00:01:12,400 --> 00:01:14,740
And instead of showing it like this,
25
00:01:14,740 --> 00:01:18,700
I instead wanna have this calender like look
26
00:01:18,700 --> 00:01:21,180
which you see here in this preview.
27
00:01:21,180 --> 00:01:24,400
I wanna have my date look like that.
28
00:01:24,400 --> 00:01:27,990
And therefore of course we need to change that HTML code,
29
00:01:27,990 --> 00:01:29,800
that JSX code
30
00:01:29,800 --> 00:01:33,200
and I'm using these terms interchangeably as well.
31
00:01:33,200 --> 00:01:35,630
We need to change that which is responsible
32
00:01:35,630 --> 00:01:38,080
for outputting that date.
33
00:01:38,080 --> 00:01:42,540
And here to build such a calender look,
34
00:01:42,540 --> 00:01:45,340
we could say that inside of that main div
35
00:01:45,340 --> 00:01:49,350
which should hold the overall date element,
36
00:01:49,350 --> 00:01:54,060
we wanna have free individual divs like this,
37
00:01:54,060 --> 00:01:57,750
where the top most div is responsible
38
00:01:57,750 --> 00:01:59,450
for outputting the month.
39
00:01:59,450 --> 00:02:02,890
The middle div is responsible for outputting the year
40
00:02:02,890 --> 00:02:06,340
and the bottom div then shows the date.
41
00:02:06,340 --> 00:02:08,880
That's something we could do.
42
00:02:08,880 --> 00:02:13,030
And, of course, for that we wanna extract month, year
43
00:02:13,030 --> 00:02:15,760
and day from the incoming date.
44
00:02:15,760 --> 00:02:18,930
So from that date prop which we're setting.
45
00:02:18,930 --> 00:02:20,980
For that here for the month,
46
00:02:20,980 --> 00:02:25,023
we can output a value dynamically and access props.date,
47
00:02:26,720 --> 00:02:28,210
and now what?
48
00:02:28,210 --> 00:02:31,770
How can we now output the month here?
49
00:02:31,770 --> 00:02:35,730
Well, we can use a built-in method which is
50
00:02:35,730 --> 00:02:39,660
accessible on all date objects in JavaScript.
51
00:02:39,660 --> 00:02:44,523
We can call the toLocaleString method.
52
00:02:45,780 --> 00:02:48,470
Now this is not a React specific method.
53
00:02:48,470 --> 00:02:50,920
You can Google for JS toLocaleString
54
00:02:50,920 --> 00:02:53,763
to find an official article on this method.
55
00:02:54,600 --> 00:02:57,730
And this method simply helps you with outputting dates
56
00:02:57,730 --> 00:03:00,620
in human readable formats.
57
00:03:00,620 --> 00:03:02,640
And you can simply call it and then pass
58
00:03:02,640 --> 00:03:05,080
in two arguments where the first argument
59
00:03:05,080 --> 00:03:09,770
is basically the language and here I'll use en-US
60
00:03:09,770 --> 00:03:11,400
to go with English.
61
00:03:11,400 --> 00:03:13,830
And then the second argument is an object
62
00:03:13,830 --> 00:03:16,980
where you configure how specifically
63
00:03:16,980 --> 00:03:19,220
that date should be formatted.
64
00:03:19,220 --> 00:03:21,300
And here we got different options
65
00:03:21,300 --> 00:03:24,960
where you can find more details in that article
66
00:03:24,960 --> 00:03:25,993
which you can find.
67
00:03:27,110 --> 00:03:29,680
Here you can learn more about the various ways
68
00:03:29,680 --> 00:03:31,960
of configuring this and using this.
69
00:03:31,960 --> 00:03:36,890
And here we can set month to long for example.
70
00:03:36,890 --> 00:03:39,150
That's one of the provided options
71
00:03:39,150 --> 00:03:41,930
or one of the supported options.
72
00:03:41,930 --> 00:03:44,670
And if we do that and save this,
73
00:03:44,670 --> 00:03:49,670
we see that August and March and June are being output here.
74
00:03:50,590 --> 00:03:52,540
So that we got a human readable way
75
00:03:52,540 --> 00:03:54,053
of outputting that month.
76
00:03:55,000 --> 00:03:58,010
Now, doing that all in line here
77
00:03:58,010 --> 00:04:00,940
in that JSX code clearly works.
78
00:04:00,940 --> 00:04:02,190
As I mentioned earlier,
79
00:04:02,190 --> 00:04:04,520
when I introduced this syntax,
80
00:04:04,520 --> 00:04:08,900
you can have expressions like this between the curly braces
81
00:04:08,900 --> 00:04:11,300
but it is considered a better practice,
82
00:04:11,300 --> 00:04:13,490
and it leads to cleaner code.
83
00:04:13,490 --> 00:04:15,580
If you extract logic like that,
84
00:04:15,580 --> 00:04:18,370
and don't put it into your JSX code,
85
00:04:18,370 --> 00:04:21,709
but instead you create a separate helper variable
86
00:04:21,709 --> 00:04:23,110
or a constant.
87
00:04:23,110 --> 00:04:24,790
Something like month here
88
00:04:24,790 --> 00:04:27,100
which simply holds that value.
89
00:04:27,100 --> 00:04:30,930
And then here between your curly braces in the JSX code
90
00:04:30,930 --> 00:04:35,110
you just point at that helper variable or a constant.
91
00:04:35,110 --> 00:04:38,370
By doing it like this you keep your JSX code lean
92
00:04:38,370 --> 00:04:42,360
and you have your more complex logic in the rest
93
00:04:42,360 --> 00:04:45,623
of this function so that this overall is easier to read.
94
00:04:46,630 --> 00:04:50,240
And now we can do something similar for the day
95
00:04:50,240 --> 00:04:51,250
and the year.
96
00:04:51,250 --> 00:04:56,250
For the day we can access props.date.toLocaleString en-US
97
00:04:59,150 --> 00:05:02,240
and then here passing a configuration where we say
98
00:05:02,240 --> 00:05:05,810
that we wanna format just the day
99
00:05:05,810 --> 00:05:08,263
and output it in a two digit format.
100
00:05:09,130 --> 00:05:11,900
And we can add a year helper constant
101
00:05:11,900 --> 00:05:13,860
where we access props.date
102
00:05:13,860 --> 00:05:16,910
and then actually just access get full year
103
00:05:16,910 --> 00:05:18,670
which is another built-in method
104
00:05:18,670 --> 00:05:22,103
which just extracts the year as a four digit number.
105
00:05:23,240 --> 00:05:27,620
And now we can use these helper constants
106
00:05:27,620 --> 00:05:31,633
to output their values like this in our JSX code.
107
00:05:33,500 --> 00:05:36,360
And if we do that and save that file,
108
00:05:36,360 --> 00:05:38,870
now we see the month,
109
00:05:38,870 --> 00:05:42,385
the year and also the day in the month.
110
00:05:42,385 --> 00:05:45,800
And that's the raw data which I wanna have here.
111
00:05:45,800 --> 00:05:49,200
Now, of course, one crucial thing is missing
112
00:05:49,200 --> 00:05:50,730
and that would be the styling.
113
00:05:50,730 --> 00:05:52,600
But before we add that,
114
00:05:52,600 --> 00:05:55,303
let's talk about splitting components.
8868
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.