Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,229 --> 00:00:03,062
[Maximilian Schwarzm�ller] Now with
2
00:00:03,062 --> 00:00:05,090
the conditional content covered here,
3
00:00:05,090 --> 00:00:06,510
before we continue,
4
00:00:06,510 --> 00:00:10,350
I wanna restructure the expenses component a little bit.
5
00:00:10,350 --> 00:00:13,710
And I actually wanna extract that list logic
6
00:00:13,710 --> 00:00:15,630
into a new component
7
00:00:15,630 --> 00:00:19,623
to again, make that expenses component a little bit leaner.
8
00:00:20,640 --> 00:00:25,460
Therefore, I'll add a expenses list JS file,
9
00:00:25,460 --> 00:00:29,800
and also expenses list dot CSS file
10
00:00:29,800 --> 00:00:32,130
which you also find attached.
11
00:00:32,130 --> 00:00:34,517
And you can already download my CSS file
12
00:00:34,517 --> 00:00:38,873
and copy the styles into your expenses list CSS file.
13
00:00:40,210 --> 00:00:43,420
In the expenses list JS file,
14
00:00:43,420 --> 00:00:47,230
I will then add a constant expenses list
15
00:00:47,230 --> 00:00:50,040
which receives props and return something.
16
00:00:50,040 --> 00:00:53,800
And of course, we export this expenses list
17
00:00:53,800 --> 00:00:57,420
and we can if we want to also import React from react.
18
00:00:57,420 --> 00:00:59,343
But again, that is optional.
19
00:01:00,840 --> 00:01:02,720
Now you're in expenses list,
20
00:01:02,720 --> 00:01:05,940
I wanna output my expenses list.
21
00:01:05,940 --> 00:01:07,610
I will not filter in there.
22
00:01:07,610 --> 00:01:10,280
I will keep the filtering logic in expenses
23
00:01:10,280 --> 00:01:13,750
since that's also where I managed the filtered year
24
00:01:13,750 --> 00:01:17,800
but I will take this fallback content, this if check,
25
00:01:17,800 --> 00:01:19,490
I will take all of that
26
00:01:19,490 --> 00:01:22,403
and move that into my expenses list component.
27
00:01:23,330 --> 00:01:25,630
That means that we also, of course,
28
00:01:25,630 --> 00:01:29,270
wanna import the expense item
29
00:01:29,270 --> 00:01:32,490
from ./ExpenseItem here
30
00:01:32,490 --> 00:01:34,290
since I'm using that component here.
31
00:01:35,700 --> 00:01:38,840
And the filtered expenses no longer exist here.
32
00:01:38,840 --> 00:01:43,000
I just wanna get, let's say, my items here or expenses.
33
00:01:43,000 --> 00:01:45,110
It's up to you. I'll name it items
34
00:01:45,110 --> 00:01:46,890
as props
35
00:01:46,890 --> 00:01:47,733
like this.
36
00:01:48,880 --> 00:01:50,460
Now in expenses JS,
37
00:01:50,460 --> 00:01:53,560
that, of course, means that here
38
00:01:53,560 --> 00:01:57,800
I now wanna output my expenses list
39
00:01:57,800 --> 00:01:58,743
down there.
40
00:01:59,580 --> 00:02:02,770
And of course, we therefore also wanna import expenses list
41
00:02:02,770 --> 00:02:05,030
from the expenses list file
42
00:02:05,030 --> 00:02:07,663
and we can get rid of the expense item import.
43
00:02:08,930 --> 00:02:11,310
And the filtered expenses should now
44
00:02:11,310 --> 00:02:15,160
be passed to expenses list through the items prop,
45
00:02:15,160 --> 00:02:17,370
which I'm using inside of expenses list.
46
00:02:17,370 --> 00:02:18,203
Like this.
47
00:02:20,660 --> 00:02:23,580
Now inside of the expenses list JS file,
48
00:02:23,580 --> 00:02:25,850
I also want to make a couple of changes now.
49
00:02:25,850 --> 00:02:28,140
Of course, we need to return some JSX
50
00:02:28,140 --> 00:02:31,250
but I want to return an unordered list here
51
00:02:31,250 --> 00:02:33,550
and actually give that list a class name
52
00:02:33,550 --> 00:02:35,833
of expenses-list.
53
00:02:36,740 --> 00:02:40,230
This is a class to find here in my CSS file
54
00:02:40,230 --> 00:02:42,370
and therefore, we also wanna import
55
00:02:42,370 --> 00:02:47,370
this expenses list CSS file into the expenses list JS file.
56
00:02:48,940 --> 00:02:50,760
And instead of this unordered list,
57
00:02:50,760 --> 00:02:52,840
I now wanna output
58
00:02:53,685 --> 00:02:54,518
my map here,
59
00:02:54,518 --> 00:02:56,583
my expense item array.
60
00:02:58,930 --> 00:03:01,000
So we'll again, grab that
61
00:03:01,000 --> 00:03:05,350
and render this dynamically here like this.
62
00:03:05,350 --> 00:03:09,510
And I will handle this if case a little bit differently now.
63
00:03:09,510 --> 00:03:11,730
I will add a if check
64
00:03:11,730 --> 00:03:16,620
but I'll check if props items length is equal to zero.
65
00:03:16,620 --> 00:03:19,910
So if we have no items and if that's the case,
66
00:03:19,910 --> 00:03:24,240
I will simply return a totally different JSX snippet
67
00:03:24,240 --> 00:03:26,000
because that's yet another way
68
00:03:26,000 --> 00:03:28,750
of handling conditional content.
69
00:03:28,750 --> 00:03:32,140
If what your component returns changes entirely
70
00:03:32,140 --> 00:03:36,310
based on different conditions, you can use this approach.
71
00:03:36,310 --> 00:03:38,730
It would have not been appropriate here
72
00:03:38,730 --> 00:03:40,660
in expenses JS before,
73
00:03:40,660 --> 00:03:44,160
because only a part of the JSX snippet,
74
00:03:44,160 --> 00:03:45,840
which we returned changed.
75
00:03:45,840 --> 00:03:47,350
So there, the approach I showed
76
00:03:47,350 --> 00:03:49,710
in the last lecture was better,
77
00:03:49,710 --> 00:03:52,510
but if your entire JSX content changes,
78
00:03:52,510 --> 00:03:53,920
when data is missing,
79
00:03:53,920 --> 00:03:56,680
you can always add a if check where you return
80
00:03:56,680 --> 00:04:00,500
a different JSX block if some condition is met.
81
00:04:00,500 --> 00:04:04,030
And here, I simply want to return an h2 tag
82
00:04:04,030 --> 00:04:08,980
with a class name of expenses-list__ fallback
83
00:04:08,980 --> 00:04:12,283
with a text of found no expenses.
84
00:04:13,120 --> 00:04:17,029
So that's what this component, expenses list, will render
85
00:04:17,029 --> 00:04:19,430
if we got no expenses.
86
00:04:19,430 --> 00:04:22,233
Hence, we can also get rid of that variable here.
87
00:04:24,020 --> 00:04:25,310
And then with that,
88
00:04:26,840 --> 00:04:29,270
we see there's found no expenses text
89
00:04:29,270 --> 00:04:32,600
or the filtered list if we switch.
90
00:04:32,600 --> 00:04:35,270
But now, with help of this extra component,
91
00:04:35,270 --> 00:04:38,360
which uses a different logic for rendering
92
00:04:38,360 --> 00:04:41,750
or for returning different JSX code,
93
00:04:41,750 --> 00:04:44,030
and we now also got a little bit
94
00:04:44,030 --> 00:04:46,650
of a leaner expenses JS file again.
95
00:04:46,650 --> 00:04:48,880
Now one additional tweak, which I want to make here
96
00:04:48,880 --> 00:04:51,380
which I almost forgot is that
97
00:04:51,380 --> 00:04:53,620
since I'm using unordered list here now
98
00:04:53,620 --> 00:04:56,834
for semantic reasons in the expense item component,
99
00:04:56,834 --> 00:04:59,680
I actually wanna switch away
100
00:04:59,680 --> 00:05:03,860
from having a div being rendered to a list item instead.
101
00:05:03,860 --> 00:05:07,090
So I will just wrap this entire card here
102
00:05:07,090 --> 00:05:08,650
with a list item
103
00:05:11,060 --> 00:05:13,560
and visually this doesn't change anything
104
00:05:13,560 --> 00:05:16,190
but semantically this is a little bit better.
105
00:05:16,190 --> 00:05:18,020
So that's just another tiny tweak
106
00:05:18,020 --> 00:05:19,513
which I wanted to make here.
8024
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.