Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,200 --> 00:00:04,700
So we learned about head and, typically,
2
00:00:04,700 --> 00:00:07,570
you wanna set up your head content
3
00:00:07,570 --> 00:00:12,570
in every page and also in every if branch inside of a page.
4
00:00:12,790 --> 00:00:15,870
Because you have very specific titles and contents
5
00:00:15,870 --> 00:00:17,833
for those different scenarios.
6
00:00:18,680 --> 00:00:21,930
Now, here in the slug page, for example,
7
00:00:21,930 --> 00:00:24,120
we definitely want to set our own title,
8
00:00:24,120 --> 00:00:27,660
and our own description, but maybe we wanna use
9
00:00:27,660 --> 00:00:29,560
the same title and description
10
00:00:29,560 --> 00:00:32,330
for all the different if cases then.
11
00:00:32,330 --> 00:00:36,100
So, we want to reuse that and not copy it manually
12
00:00:36,100 --> 00:00:38,470
into all those different cases.
13
00:00:38,470 --> 00:00:41,310
We could copy it but that's, of course, annoying.
14
00:00:41,310 --> 00:00:43,600
Now, reusing here is simple,
15
00:00:43,600 --> 00:00:46,800
we don't need any special Next.js concept.
16
00:00:46,800 --> 00:00:50,740
We can use a standard React.js approach.
17
00:00:50,740 --> 00:00:52,520
Instead of copy and pasting it,
18
00:00:52,520 --> 00:00:56,330
we cut it from down there, and we set it up once right
19
00:00:56,330 --> 00:01:00,770
at the beginning of this component render function.
20
00:01:00,770 --> 00:01:03,670
So, here before I have my first if check,
21
00:01:03,670 --> 00:01:06,510
so before we render something the first time,
22
00:01:06,510 --> 00:01:11,090
so to say, I create a new constant pageHeadData,
23
00:01:11,090 --> 00:01:12,890
or whatever you want to name it.
24
00:01:12,890 --> 00:01:16,180
And that contains my head section.
25
00:01:16,180 --> 00:01:19,660
Now, since I rely on numMonth and numYear here
26
00:01:19,660 --> 00:01:22,393
we might want to extract this first.
27
00:01:23,810 --> 00:01:27,540
So, I'll cut that here and move this
28
00:01:28,400 --> 00:01:32,090
in front of this pageHeadData part here.
29
00:01:32,090 --> 00:01:35,060
And then, we can just include pageHeadData
30
00:01:35,060 --> 00:01:38,930
in all our return statements.
31
00:01:38,930 --> 00:01:42,000
So for example, here, I then wrap this into a fragment
32
00:01:42,880 --> 00:01:46,790
because I now want to add an adjacent JSX element.
33
00:01:46,790 --> 00:01:51,000
I wanna also include my pageHeadData
34
00:01:51,000 --> 00:01:54,380
and output the content of this constant dynamically
35
00:01:54,380 --> 00:01:58,230
in this returned JSX code and the content
36
00:01:58,230 --> 00:02:02,030
of this constant, of course, is this JSX code.
37
00:02:02,030 --> 00:02:05,600
And we can now do this in all our return statements.
38
00:02:05,600 --> 00:02:10,600
So, also here, and here, and also
39
00:02:10,720 --> 00:02:13,390
in the final return statement here.
40
00:02:13,390 --> 00:02:15,480
So, that would be a standard React way
41
00:02:15,480 --> 00:02:18,350
of reusing some logic and if we do that,
42
00:02:18,350 --> 00:02:20,900
if I reload, I get an error
43
00:02:20,900 --> 00:02:24,650
that I cannot read property 0 of undefined.
44
00:02:24,650 --> 00:02:29,460
And the problem is that I'm accessing my filtered data here
45
00:02:29,460 --> 00:02:33,060
and the filtered data might be empty, of course,
46
00:02:33,060 --> 00:02:36,670
or it actually will be when the page renders the first time
47
00:02:36,670 --> 00:02:39,830
because I explained that use router works such
48
00:02:39,830 --> 00:02:43,050
that it runs when the page was first rendered
49
00:02:43,050 --> 00:02:47,410
and if it doesn't have the path parameter values,
50
00:02:47,410 --> 00:02:49,780
at this point, it then runs again
51
00:02:49,780 --> 00:02:51,270
and has access to them thereafter
52
00:02:51,270 --> 00:02:52,920
but not at the beginning.
53
00:02:52,920 --> 00:02:55,930
And therefore, actually, I want to move
54
00:02:55,930 --> 00:03:00,540
that filtered data part after the if loaded events part
55
00:03:00,540 --> 00:03:05,540
that was correct, and I want to set up my pageHeadData there
56
00:03:05,610 --> 00:03:10,430
after therefore, so below here,
57
00:03:10,430 --> 00:03:13,360
but I will remove const here,
58
00:03:13,360 --> 00:03:17,750
and instead create pageHeadData as a variable here
59
00:03:17,750 --> 00:03:21,770
and just assign a different content at the beginning.
60
00:03:21,770 --> 00:03:24,500
So, here it still holds the head element
61
00:03:24,500 --> 00:03:26,910
but I'll have a different description.
62
00:03:26,910 --> 00:03:31,600
So, I'll copy the title and my meta content here.
63
00:03:31,600 --> 00:03:35,730
But the description here is a list
64
00:03:36,660 --> 00:03:39,633
of filtered events, something like this.
65
00:03:42,580 --> 00:03:45,508
So, now, we changed the pageHeadData
66
00:03:45,508 --> 00:03:47,840
inside of this component function,
67
00:03:47,840 --> 00:03:50,720
depending on whether we have data or not.
68
00:03:50,720 --> 00:03:53,590
And, with that, if we save this and reload,
69
00:03:53,590 --> 00:03:57,210
this does load and now, if I inspected the page source here,
70
00:03:57,210 --> 00:03:59,460
we see that we do have that title
71
00:03:59,460 --> 00:04:01,783
and that we do have that description here.
72
00:04:03,330 --> 00:04:05,630
So, that's how we can reuse
73
00:04:05,630 --> 00:04:08,630
the head data inside of a component,
74
00:04:08,630 --> 00:04:11,420
if we have different return statements
75
00:04:11,420 --> 00:04:14,200
and therefore different pieces of JSX code
76
00:04:14,200 --> 00:04:16,673
that might be rendered by that component.
77
00:04:17,769 --> 00:04:20,892
But that's not the only way of reuse that which we have.
6195
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.