Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,110 --> 00:00:03,980
So our filter is now working,
2
00:00:03,980 --> 00:00:08,760
but we can actually select values where we have no data.
3
00:00:08,760 --> 00:00:11,280
And we might wanna show an appropriate message
4
00:00:11,280 --> 00:00:12,820
in such cases,
5
00:00:12,820 --> 00:00:16,660
and that leads us to the second part of this module,
6
00:00:16,660 --> 00:00:21,130
conditional content, which is also important.
7
00:00:21,130 --> 00:00:24,218
Conditional content is about rendering different output
8
00:00:24,218 --> 00:00:26,950
under different conditions.
9
00:00:26,950 --> 00:00:28,550
So I'm not talking about lists,
10
00:00:28,550 --> 00:00:33,550
but about rendering either A or B or C, whatever you need.
11
00:00:33,970 --> 00:00:36,000
And that's something I wanna do here,
12
00:00:36,000 --> 00:00:40,069
in Expenses.js, we render our list of expense items,
13
00:00:40,069 --> 00:00:43,987
but if our filtered expenses, array turns out to be empty,
14
00:00:43,987 --> 00:00:45,503
we render nothing.
15
00:00:46,400 --> 00:00:48,650
Now, we might wanna instead
16
00:00:48,650 --> 00:00:52,540
render a message telling the user that we have no items
17
00:00:52,540 --> 00:00:54,490
for the chosen filter.
18
00:00:54,490 --> 00:00:57,660
And for that, we wanna render content conditionally.
19
00:00:57,660 --> 00:00:59,150
How can we do that?
20
00:00:59,150 --> 00:01:02,230
Well, we can again add a dynamic expression here
21
00:01:02,230 --> 00:01:07,050
in our JSX code and simply use a condition here.
22
00:01:07,050 --> 00:01:09,240
I'm not talking about an if condition
23
00:01:09,240 --> 00:01:12,120
because long statements like this,
24
00:01:12,120 --> 00:01:14,050
the same is true for four loops
25
00:01:14,050 --> 00:01:17,950
are actually not allowed here between these curly braces,
26
00:01:17,950 --> 00:01:21,120
but we can use a ternary expression here.
27
00:01:21,120 --> 00:01:25,010
And we could check if our filtered expenses length
28
00:01:25,010 --> 00:01:27,660
is equal to zero,
29
00:01:27,660 --> 00:01:29,400
which means we have no items
30
00:01:29,400 --> 00:01:31,530
in that filtered expenses array.
31
00:01:31,530 --> 00:01:34,850
And if that's the case, after a question mark,
32
00:01:34,850 --> 00:01:39,080
which is the default JavaScript ternary expression syntax
33
00:01:39,080 --> 00:01:42,260
we render a simple message and a paragraph
34
00:01:42,260 --> 00:01:45,663
where we say, no expenses found.
35
00:01:47,441 --> 00:01:52,020
Otherwise after the colon, we render our list.
36
00:01:52,020 --> 00:01:55,530
So we grab this year, cut it
37
00:01:55,530 --> 00:01:58,450
and removed as empty pair of curly braces now,
38
00:01:58,450 --> 00:02:02,723
and we render this mapping expression in the else case.
39
00:02:04,180 --> 00:02:05,013
And again,
40
00:02:05,013 --> 00:02:09,009
that's the default JavaScript ternary expression syntax,
41
00:02:09,009 --> 00:02:12,910
condition, question mark then what we wanna do
42
00:02:12,910 --> 00:02:16,480
if the condition is met, colon for the else case,
43
00:02:16,480 --> 00:02:18,180
what we wanna do, if it's not met.
44
00:02:19,510 --> 00:02:22,730
And if you save this, you see,
45
00:02:22,730 --> 00:02:26,060
I got no expenses found here for 2022,
46
00:02:26,060 --> 00:02:29,310
but for 2020, I do have my expense.
47
00:02:29,310 --> 00:02:31,130
Of course, that's a bit hard to read,
48
00:02:31,130 --> 00:02:32,720
we can fine-tune this in a second,
49
00:02:32,720 --> 00:02:35,473
but that's how we can render content conditionally.
50
00:02:36,460 --> 00:02:39,020
Of course, long ternary expressions like this
51
00:02:39,020 --> 00:02:41,120
can be a bit hard to read though.
52
00:02:41,120 --> 00:02:45,410
So we can also fine-tune this or restructure this
53
00:02:45,410 --> 00:02:48,133
and reuse this condition,
54
00:02:49,930 --> 00:02:54,080
but then abuse a little trick in JavaScript.
55
00:02:54,080 --> 00:02:59,080
We can add the end operator and then use the content,
56
00:02:59,380 --> 00:03:03,120
the JSX content we wanna render if this condition is met,
57
00:03:03,120 --> 00:03:07,430
JavaScript works such that if you use the end operator,
58
00:03:07,430 --> 00:03:11,860
it basically will return the part after the end operator,
59
00:03:11,860 --> 00:03:15,470
as a result of this overall check here,
60
00:03:15,470 --> 00:03:18,280
if the first condition is met.
61
00:03:18,280 --> 00:03:20,440
So if this first condition is met,
62
00:03:20,440 --> 00:03:23,420
it moves on to the part after the end operator
63
00:03:23,420 --> 00:03:26,000
and it then returns, that value.
64
00:03:26,000 --> 00:03:28,080
And that's what we're abusing here.
65
00:03:28,080 --> 00:03:30,450
And abusing sounds like a bad thing,
66
00:03:30,450 --> 00:03:33,040
this is actually something which is fine to use,
67
00:03:33,040 --> 00:03:35,220
you'll see it in a lot of React projects.
68
00:03:35,220 --> 00:03:38,113
And it simply allows you to write shorter expressions,
69
00:03:39,030 --> 00:03:42,720
because now we can do the same here for our alternative.
70
00:03:42,720 --> 00:03:46,420
There we wanna check if we got more than zero items,
71
00:03:46,420 --> 00:03:51,123
and then we use && to output our list here.
72
00:03:52,150 --> 00:03:55,510
So now I basically split that long ternary expression
73
00:03:55,510 --> 00:03:58,340
into two stand-alone expressions,
74
00:03:58,340 --> 00:04:01,160
which check different conditions,
75
00:04:01,160 --> 00:04:03,580
using this & trick here,
76
00:04:03,580 --> 00:04:06,240
where the part after & is rendered
77
00:04:06,240 --> 00:04:09,610
if the part before & returns true.
78
00:04:09,610 --> 00:04:11,962
And with that, we got the same behavior as before,
79
00:04:11,962 --> 00:04:13,423
as you can tell.
80
00:04:14,260 --> 00:04:18,149
But even that might be too much logic in the JSX code.
81
00:04:18,149 --> 00:04:22,079
So we also got a totally alternative way of handling this.
82
00:04:22,079 --> 00:04:23,780
We can add a variable,
83
00:04:23,780 --> 00:04:28,780
maybe name it, expensesContent, but the name is up to you.
84
00:04:29,260 --> 00:04:31,590
And we assign a default value here.
85
00:04:31,590 --> 00:04:33,620
And the default value could be our message
86
00:04:33,620 --> 00:04:36,080
that no content was found.
87
00:04:36,080 --> 00:04:40,340
And we can store JSX content like this in variables.
88
00:04:40,340 --> 00:04:43,659
We can return it and we can also use it anywhere else,
89
00:04:43,659 --> 00:04:46,650
where we work with values.
90
00:04:46,650 --> 00:04:50,440
So we can store JSX content in the variables,
91
00:04:50,440 --> 00:04:53,580
as I'm doing it here, this is absolutely fine.
92
00:04:53,580 --> 00:04:57,690
You are not limited to using JSX only if you return,
93
00:04:57,690 --> 00:05:00,670
you can also use it to create a value,
94
00:05:00,670 --> 00:05:03,310
which is stored in a variable.
95
00:05:03,310 --> 00:05:05,450
Now, why am I doing that though?
96
00:05:05,450 --> 00:05:07,370
Because now we can edit if check here,
97
00:05:07,370 --> 00:05:08,930
before we return
98
00:05:08,930 --> 00:05:11,800
and we can check if filtered expenses length
99
00:05:11,800 --> 00:05:13,540
is greater than zero,
100
00:05:13,540 --> 00:05:16,970
so if we do have filtered expenses.
101
00:05:16,970 --> 00:05:18,080
And if that's the case,
102
00:05:18,080 --> 00:05:20,490
I wanna overwrite expensesContent.
103
00:05:20,490 --> 00:05:23,220
So I will change the value of this variable
104
00:05:23,220 --> 00:05:26,570
and I will set this then to the result
105
00:05:26,570 --> 00:05:29,593
of this map call here like this.
106
00:05:30,510 --> 00:05:32,720
So this list of expense items,
107
00:05:32,720 --> 00:05:35,540
that's my value stored in expensesContent
108
00:05:35,540 --> 00:05:37,913
if we got a length greater than zero.
109
00:05:39,260 --> 00:05:43,260
And then down there in our returned, JSX code,
110
00:05:43,260 --> 00:05:45,490
we can get rid of all that logic.
111
00:05:45,490 --> 00:05:48,430
And we just add a simple dynamic expression
112
00:05:48,430 --> 00:05:51,300
where we point at expensesContent.
113
00:05:51,300 --> 00:05:53,103
So add this variable.
114
00:05:54,270 --> 00:05:57,410
And this variable holds either this JSX code
115
00:05:57,410 --> 00:06:00,460
or this array of JSX elements.
116
00:06:00,460 --> 00:06:04,660
Both is a renderable and therefore both can be used here.
117
00:06:04,660 --> 00:06:08,140
And now we get a lean JSX snippet which we return,
118
00:06:08,140 --> 00:06:11,630
and we've got our logic in the component function itself.
119
00:06:11,630 --> 00:06:14,810
And we could argue that this is more readable.
120
00:06:14,810 --> 00:06:19,220
And again, if you save that, it works just as before.
121
00:06:19,220 --> 00:06:21,930
And it's up to you, which approach you prefer.
122
00:06:21,930 --> 00:06:24,860
It also depends on the length of the conditions
123
00:06:24,860 --> 00:06:28,370
and the content which is rendered under different cases.
124
00:06:28,370 --> 00:06:31,086
But ultimately this is probably the cleanest way,
125
00:06:31,086 --> 00:06:34,280
but again, it is up to you what you prefer.
126
00:06:34,280 --> 00:06:36,100
I want to show you all options
127
00:06:36,100 --> 00:06:37,630
so that you can go with the way
128
00:06:37,630 --> 00:06:39,700
which you personally lik the most.
129
00:06:39,700 --> 00:06:41,530
I will go with this approach
130
00:06:41,530 --> 00:06:45,073
because I'm a fan of having a lean JSX snippet here.
10313
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.