Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,090 --> 00:00:03,960
So let's now make sure we can listen
2
00:00:03,960 --> 00:00:06,689
to a click on this delete button.
3
00:00:06,689 --> 00:00:11,690
In Vanilla JavaScript, so in just JavaScript without React,
4
00:00:12,330 --> 00:00:15,150
we would find a way of selecting this button
5
00:00:15,150 --> 00:00:18,960
for example, with document query selector button
6
00:00:18,960 --> 00:00:22,600
and then once we got hold of this DOM object,
7
00:00:22,600 --> 00:00:26,720
we could add a click listener with, "Add event listener."
8
00:00:26,720 --> 00:00:29,880
Now this is, again, an imperative approach.
9
00:00:29,880 --> 00:00:32,560
We describe what should happen.
10
00:00:32,560 --> 00:00:35,830
With React, we rather use a declarative approach
11
00:00:35,830 --> 00:00:38,260
describing the target result.
12
00:00:38,260 --> 00:00:41,770
And hence, this is not code we write and React.
13
00:00:41,770 --> 00:00:44,810
Instead with React, if we wanna listen to a click
14
00:00:44,810 --> 00:00:49,810
on this button, we add an extra attribute on this button.
15
00:00:49,820 --> 00:00:52,050
And for this, it's important to understand
16
00:00:52,050 --> 00:00:56,170
that all these default HTML elements
17
00:00:56,170 --> 00:00:59,950
are, in the end, all the just React components,
18
00:00:59,950 --> 00:01:04,390
just React components that are built into React already.
19
00:01:04,390 --> 00:01:08,730
So they look like regular HTML elements and you use them
20
00:01:08,730 --> 00:01:12,490
like regular HTML elements but under the hood,
21
00:01:12,490 --> 00:01:14,610
these are components.
22
00:01:14,610 --> 00:01:17,630
And that matters because that means that you can add
23
00:01:17,630 --> 00:01:21,650
certain attributes which you could not add like this
24
00:01:21,650 --> 00:01:25,040
at least with just HTML.
25
00:01:25,040 --> 00:01:30,010
For example, on a button or actually on any HTML element
26
00:01:30,010 --> 00:01:33,900
here in JSX, you can add a on click attribute
27
00:01:33,900 --> 00:01:38,150
written like this, lower case o, upper case C,
28
00:01:38,150 --> 00:01:42,640
and the casing does matter unlike in regular HTML.
29
00:01:42,640 --> 00:01:44,433
Here, it does matter.
30
00:01:45,500 --> 00:01:49,850
Now when you add the on click prop as it's called,
31
00:01:49,850 --> 00:01:53,700
as you learned, to a button or to any other element,
32
00:01:53,700 --> 00:01:58,040
you're telling React that you wanna react to a click
33
00:01:58,040 --> 00:02:00,160
on that element.
34
00:02:00,160 --> 00:02:04,180
Now, the value you assign for this attribute
35
00:02:04,180 --> 00:02:08,169
is then not some text, not a string,
36
00:02:08,169 --> 00:02:10,690
but instead a dynamic expression
37
00:02:10,690 --> 00:02:14,900
which should hold a function that should be executed
38
00:02:14,900 --> 00:02:16,970
when a click occurs.
39
00:02:16,970 --> 00:02:20,220
So here, we could define an anonymous inline function
40
00:02:20,220 --> 00:02:24,470
like this or also with the arrow function syntax
41
00:02:24,470 --> 00:02:27,300
which you can use in Modern JavaScript
42
00:02:27,300 --> 00:02:32,300
or you point at another function and I'll do the latter.
43
00:02:32,910 --> 00:02:37,190
I'll create a new function and important, I'll create it
44
00:02:37,190 --> 00:02:42,010
as a nested function inside of the to do function.
45
00:02:42,010 --> 00:02:43,600
And that might look weird
46
00:02:43,600 --> 00:02:46,520
but that's actually standard JavaScript.
47
00:02:46,520 --> 00:02:51,300
In JavaScript, also without React, you can define functions
48
00:02:51,300 --> 00:02:53,370
inside of functions.
49
00:02:53,370 --> 00:02:56,500
So here, I'll add a function inside of the to do function
50
00:02:56,500 --> 00:02:59,130
inside of that to do function component
51
00:02:59,130 --> 00:03:03,360
and we could name this, "Delete handler."
52
00:03:03,360 --> 00:03:05,890
The function name is totally up to you.
53
00:03:05,890 --> 00:03:09,750
I personally like this convention where functions,
54
00:03:09,750 --> 00:03:14,040
which are executed upon events, and with handler
55
00:03:14,040 --> 00:03:15,670
but other people don't use that,
56
00:03:15,670 --> 00:03:20,300
but instead might use, "Handle delete" or just "Delete."
57
00:03:20,300 --> 00:03:24,170
Totally up to you, I'll go with, "Delete handler" here.
58
00:03:24,170 --> 00:03:28,090
And then point at this function as a value here
59
00:03:28,090 --> 00:03:30,210
for this on click prop
60
00:03:30,210 --> 00:03:33,200
simply by repeating the function name here.
61
00:03:33,200 --> 00:03:36,500
And now here is an extremely important thing
62
00:03:36,500 --> 00:03:38,260
to keep in mind.
63
00:03:38,260 --> 00:03:43,260
You don't execute the function here so no parenthesis.
64
00:03:43,520 --> 00:03:45,460
If you would execute it here,
65
00:03:45,460 --> 00:03:47,340
this function would be executed
66
00:03:47,340 --> 00:03:52,340
as soon as JavaScript and React evaluates this code.
67
00:03:53,180 --> 00:03:55,770
So when this line of code is evaluated,
68
00:03:55,770 --> 00:03:57,960
the function would execute.
69
00:03:57,960 --> 00:04:00,070
Now that is too early though.
70
00:04:00,070 --> 00:04:03,610
We wanna execute the function when the button is clicked,
71
00:04:03,610 --> 00:04:07,270
not when that code is evaluated by JavaScript
72
00:04:07,270 --> 00:04:09,220
because that happens right before
73
00:04:09,220 --> 00:04:12,120
that content is rendered in the browser.
74
00:04:12,120 --> 00:04:14,770
Hence, we just point at this function
75
00:04:14,770 --> 00:04:18,860
by just using its name here and that just tells React
76
00:04:18,860 --> 00:04:23,200
in the end that it's this function that should be executed
77
00:04:23,200 --> 00:04:25,123
when this element is clicked.
78
00:04:26,140 --> 00:04:28,680
And now in here, we can do whatever we want.
79
00:04:28,680 --> 00:04:33,570
For example, we can console log clicked here for the moment
80
00:04:33,570 --> 00:04:35,610
and if we do that and save this,
81
00:04:35,610 --> 00:04:39,280
if I go to the JavaScript console in the diff tools,
82
00:04:39,280 --> 00:04:41,970
if we click one of these delete buttons,
83
00:04:41,970 --> 00:04:45,867
doesn't matter which one you click, you see, "Clicked!"
84
00:04:47,180 --> 00:04:50,130
Now we could all the output, clicked
85
00:04:50,130 --> 00:04:54,640
and then as an extra log, "Props.text"
86
00:04:54,640 --> 00:04:58,580
so that text value which we receive via props
87
00:04:58,580 --> 00:05:02,140
which has all the output down there in the h2 tag.
88
00:05:02,140 --> 00:05:04,760
I'm now referring to it again here
89
00:05:04,760 --> 00:05:08,090
because this is just standard JavaScript in the end
90
00:05:08,090 --> 00:05:11,810
even though this JSX code definitely doesn't look like it.
91
00:05:11,810 --> 00:05:15,120
But up here, we write standard JavaScript
92
00:05:15,120 --> 00:05:16,200
and hence, of course,
93
00:05:16,200 --> 00:05:19,420
here we can also use one of our arguments
94
00:05:19,420 --> 00:05:22,030
and if that argument turns out to be an object,
95
00:05:22,030 --> 00:05:26,120
which props is, we can also drill into that object here.
96
00:05:26,120 --> 00:05:28,730
With that, if I save this and click, "Delete",
97
00:05:28,730 --> 00:05:33,230
you see the proper text being output here as well.
98
00:05:33,230 --> 00:05:35,390
And maybe it's not clear here
99
00:05:35,390 --> 00:05:38,650
but that's another strength of React.
100
00:05:38,650 --> 00:05:41,810
Without any extra work from our side,
101
00:05:41,810 --> 00:05:46,710
these three different buttons are doing different things.
102
00:05:46,710 --> 00:05:48,710
I mean, they're always doing the same thing.
103
00:05:48,710 --> 00:05:51,330
We just defined this logic once,
104
00:05:51,330 --> 00:05:54,460
but the concrete values with which they work,
105
00:05:54,460 --> 00:05:56,630
the concrete text which they output,
106
00:05:56,630 --> 00:05:57,830
is not the same.
107
00:05:57,830 --> 00:06:00,250
Instead, it's different for every button.
108
00:06:00,250 --> 00:06:03,190
And that means that we can easily write logic
109
00:06:03,190 --> 00:06:06,410
that's specific to a specific to do,
110
00:06:06,410 --> 00:06:09,720
whilst still being able to define this logic once
111
00:06:09,720 --> 00:06:12,100
instead of three times which is great
112
00:06:12,100 --> 00:06:14,483
and makes our code way more reusable.
113
00:06:15,580 --> 00:06:18,280
But of course here, the goal is not to log something
114
00:06:18,280 --> 00:06:19,850
to the console.
115
00:06:19,850 --> 00:06:22,760
Instead, we wanna show a little overlay
116
00:06:22,760 --> 00:06:25,890
when that button is clicked and for this, of course,
117
00:06:25,890 --> 00:06:29,200
we need to first of all create that overlay.
118
00:06:29,200 --> 00:06:33,030
We need to create the HTML code that should be showing up
119
00:06:33,030 --> 00:06:35,350
and then as a second step,
120
00:06:35,350 --> 00:06:38,693
we also need to find a way of showing it conditionally.
9783
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.