Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,260 --> 00:00:04,810
So with that custom wrapper component,
2
00:00:04,810 --> 00:00:08,310
we could use a little trick to fulfill this requirement
3
00:00:08,310 --> 00:00:10,803
and not end up with div soup.
4
00:00:11,760 --> 00:00:13,530
Now, because it's so convenient
5
00:00:13,530 --> 00:00:17,760
and also so obvious in the end, at least once you saw it,
6
00:00:17,760 --> 00:00:19,280
this wrapper component
7
00:00:19,280 --> 00:00:22,470
is actually not a component we need to build on our own.
8
00:00:22,470 --> 00:00:24,580
Instead it comes with React.
9
00:00:24,580 --> 00:00:26,890
There, it's the fragment component
10
00:00:26,890 --> 00:00:29,400
which you can access on React.Fragment,
11
00:00:29,400 --> 00:00:32,220
or you just import Fragment from React.
12
00:00:32,220 --> 00:00:34,710
I will show you how to use it in a second.
13
00:00:34,710 --> 00:00:36,430
Or in some projects,
14
00:00:36,430 --> 00:00:38,450
you can also use the shortcut on the right,
15
00:00:38,450 --> 00:00:40,770
but this depends on your project set up
16
00:00:40,770 --> 00:00:44,040
because your build workflow needs to support this.
17
00:00:44,040 --> 00:00:46,860
The left syntax will always work.
18
00:00:46,860 --> 00:00:48,770
And that's the same as our wrapper.
19
00:00:48,770 --> 00:00:53,600
These two syntaxes here render empty wrappers,
20
00:00:53,600 --> 00:00:58,030
which don't render any actual HTML element to the DOM.
21
00:00:58,030 --> 00:00:59,750
It's just built into React,
22
00:00:59,750 --> 00:01:01,930
but I showed you our custom wrapper
23
00:01:01,930 --> 00:01:05,670
so that you understand what these built in wrappers do.
24
00:01:05,670 --> 00:01:07,520
So if you want to use to built in wrappers,
25
00:01:07,520 --> 00:01:09,220
let's say in the app component,
26
00:01:09,220 --> 00:01:11,800
where I said that we also had the problem,
27
00:01:11,800 --> 00:01:16,800
we can remove the div and just use these empty tags.
28
00:01:17,230 --> 00:01:19,270
Now that's not valid HTML,
29
00:01:19,270 --> 00:01:23,940
and it's also not necessarily valid JSX in all projects.
30
00:01:23,940 --> 00:01:26,910
Your project set up needs to support it.
31
00:01:26,910 --> 00:01:29,680
Now this project set up does support it,
32
00:01:29,680 --> 00:01:32,230
and if you downloaded this attached project
33
00:01:32,230 --> 00:01:33,870
which was attached earlier,
34
00:01:33,870 --> 00:01:35,960
you therefore shouldn't get any problems.
35
00:01:35,960 --> 00:01:39,340
And hence, now if you save, you see it also still works.
36
00:01:39,340 --> 00:01:40,620
Everything works.
37
00:01:40,620 --> 00:01:41,930
And if I get that modal again,
38
00:01:41,930 --> 00:01:44,840
you see now that one div which we had before,
39
00:01:44,840 --> 00:01:46,440
don't mistake it for the root div,
40
00:01:46,440 --> 00:01:49,430
there was another div before, is now also gone
41
00:01:49,430 --> 00:01:53,220
because I'm now also using this wrapper, this fragment
42
00:01:53,220 --> 00:01:56,560
as it's officially called in the app component.
43
00:01:56,560 --> 00:01:58,210
Now, if this syntax doesn't work
44
00:01:58,210 --> 00:01:59,520
or if you don't like it,
45
00:01:59,520 --> 00:02:03,007
you can always use React.Fragment like this,
46
00:02:05,920 --> 00:02:08,150
and this will then work.
47
00:02:08,150 --> 00:02:10,550
So React.Fragment opening and closing.
48
00:02:10,550 --> 00:02:12,140
This will always work.
49
00:02:12,140 --> 00:02:15,040
You just need to make sure you're importing React.
50
00:02:15,040 --> 00:02:19,420
Or you directly add Fragment as a named import here
51
00:02:19,420 --> 00:02:22,190
in these curly braces from React.
52
00:02:22,190 --> 00:02:25,030
Then you can also use it just by that name.
53
00:02:25,030 --> 00:02:26,433
So that's an alternative.
54
00:02:27,800 --> 00:02:30,060
So that of course is what we'll typically use,
55
00:02:30,060 --> 00:02:33,410
Fragment or React.Fragment or this shortcut.
56
00:02:33,410 --> 00:02:35,910
We're not typically writing our own wrappers,
57
00:02:35,910 --> 00:02:37,210
but of course it is important
58
00:02:37,210 --> 00:02:39,370
that you understand how it works under the hood,
59
00:02:39,370 --> 00:02:40,970
which is why I showed it to you.
4599
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.