1
00:00:02,000 --> 00:00:03,000
So let's now make sure we can listen

2
00:00:03,000 --> 00:00:06,000
to a click on this delete button.

3
00:00:06,000 --> 00:00:11,000
In Vanilla JavaScript, so in just JavaScript without React,

4
00:00:12,000 --> 00:00:15,000
we would find a way of selecting this button

5
00:00:15,000 --> 00:00:18,000
for example, with document query selector button

6
00:00:18,000 --> 00:00:22,000
and then once we got hold of this DOM object,

7
00:00:22,000 --> 00:00:26,000
we could add a click listener with, "Add event listener."

8
00:00:26,000 --> 00:00:29,000
Now this is, again, an imperative approach.

9
00:00:29,000 --> 00:00:32,000
We describe what should happen.

10
00:00:32,000 --> 00:00:35,000
With React, we rather use a declarative approach

11
00:00:35,000 --> 00:00:38,000
describing the target result.

12
00:00:38,000 --> 00:00:41,000
And hence, this is not code we write and React.

13
00:00:41,000 --> 00:00:44,000
Instead with React, if we wanna listen to a click

14
00:00:44,000 --> 00:00:49,000
on this button, we add an extra attribute on this button.

15
00:00:49,000 --> 00:00:52,000
And for this, it's important to understand

16
00:00:52,000 --> 00:00:56,000
that all these default HTML elements

17
00:00:56,000 --> 00:00:59,000
are, in the end, all the just React components,

18
00:00:59,000 --> 00:01:04,000
just React components that are built into React already.

19
00:01:04,000 --> 00:01:08,000
So they look like regular HTML elements and you use them

20
00:01:08,000 --> 00:01:12,000
like regular HTML elements but under the hood,

21
00:01:12,000 --> 00:01:14,000
these are components.

22
00:01:14,000 --> 00:01:17,000
And that matters because that means that you can add

23
00:01:17,000 --> 00:01:21,000
certain attributes which you could not add like this

24
00:01:21,000 --> 00:01:25,000
at least with just HTML.

25
00:01:25,000 --> 00:01:30,000
For example, on a button or actually on any HTML element

26
00:01:30,000 --> 00:01:33,000
here in JSX, you can add a on click attribute

27
00:01:33,000 --> 00:01:38,000
written like this, lower case o, upper case C,

28
00:01:38,000 --> 00:01:42,000
and the casing does matter unlike in regular HTML.

29
00:01:42,000 --> 00:01:44,000
Here, it does matter.

30
00:01:45,000 --> 00:01:49,000
Now when you add the on click prop as it's called,

31
00:01:49,000 --> 00:01:53,000
as you learned, to a button or to any other element,

32
00:01:53,000 --> 00:01:58,000
you're telling React that you wanna react to a click

33
00:01:58,000 --> 00:02:00,000
on that element.

34
00:02:00,000 --> 00:02:04,000
Now, the value you assign for this attribute

35
00:02:04,000 --> 00:02:08,000
is then not some text, not a string,

36
00:02:08,000 --> 00:02:10,000
but instead a dynamic expression

37
00:02:10,000 --> 00:02:14,000
which should hold a function that should be executed

38
00:02:14,000 --> 00:02:16,000
when a click occurs.

39
00:02:16,000 --> 00:02:20,000
So here, we could define an anonymous inline function

40
00:02:20,000 --> 00:02:24,000
like this or also with the arrow function syntax

41
00:02:24,000 --> 00:02:27,000
which you can use in Modern JavaScript

42
00:02:27,000 --> 00:02:32,000
or you point at another function and I'll do the latter.

43
00:02:32,000 --> 00:02:37,000
I'll create a new function and important, I'll create it

44
00:02:37,000 --> 00:02:42,000
as a nested function inside of the to do function.

45
00:02:42,000 --> 00:02:43,000
And that might look weird

46
00:02:43,000 --> 00:02:46,000
but that's actually standard JavaScript.

47
00:02:46,000 --> 00:02:51,000
In JavaScript, also without React, you can define functions

48
00:02:51,000 --> 00:02:53,000
inside of functions.

49
00:02:53,000 --> 00:02:56,000
So here, I'll add a function inside of the to do function

50
00:02:56,000 --> 00:02:59,000
inside of that to do function component

51
00:02:59,000 --> 00:03:03,000
and we could name this, "Delete handler."

52
00:03:03,000 --> 00:03:05,000
The function name is totally up to you.

53
00:03:05,000 --> 00:03:09,000
I personally like this convention where functions,

54
00:03:09,000 --> 00:03:14,000
which are executed upon events, and with handler

55
00:03:14,000 --> 00:03:15,000
but other people don't use that,

56
00:03:15,000 --> 00:03:20,000
but instead might use, "Handle delete" or just "Delete."

57
00:03:20,000 --> 00:03:24,000
Totally up to you, I'll go with, "Delete handler" here.

58
00:03:24,000 --> 00:03:28,000
And then point at this function as a value here

59
00:03:28,000 --> 00:03:30,000
for this on click prop

60
00:03:30,000 --> 00:03:33,000
simply by repeating the function name here.

61
00:03:33,000 --> 00:03:36,000
And now here is an extremely important thing

62
00:03:36,000 --> 00:03:38,000
to keep in mind.

63
00:03:38,000 --> 00:03:43,000
You don't execute the function here so no parenthesis.

64
00:03:43,000 --> 00:03:45,000
If you would execute it here,

65
00:03:45,000 --> 00:03:47,000
this function would be executed

66
00:03:47,000 --> 00:03:52,000
as soon as JavaScript and React evaluates this code.

67
00:03:53,000 --> 00:03:55,000
So when this line of code is evaluated,

68
00:03:55,000 --> 00:03:57,000
the function would execute.

69
00:03:57,000 --> 00:04:00,000
Now that is too early though.

70
00:04:00,000 --> 00:04:03,000
We wanna execute the function when the button is clicked,

71
00:04:03,000 --> 00:04:07,000
not when that code is evaluated by JavaScript

72
00:04:07,000 --> 00:04:09,000
because that happens right before

73
00:04:09,000 --> 00:04:12,000
that content is rendered in the browser.

74
00:04:12,000 --> 00:04:14,000
Hence, we just point at this function

75
00:04:14,000 --> 00:04:18,000
by just using its name here and that just tells React

76
00:04:18,000 --> 00:04:23,000
in the end that it's this function that should be executed

77
00:04:23,000 --> 00:04:25,000
when this element is clicked.

78
00:04:26,000 --> 00:04:28,000
And now in here, we can do whatever we want.

79
00:04:28,000 --> 00:04:33,000
For example, we can console log clicked here for the moment

80
00:04:33,000 --> 00:04:35,000
and if we do that and save this,

81
00:04:35,000 --> 00:04:39,000
if I go to the JavaScript console in the diff tools,

82
00:04:39,000 --> 00:04:41,000
if we click one of these delete buttons,

83
00:04:41,000 --> 00:04:45,000
doesn't matter which one you click, you see, "Clicked!"

84
00:04:47,000 --> 00:04:50,000
Now we could all the output, clicked

85
00:04:50,000 --> 00:04:54,000
and then as an extra log, "Props.text"

86
00:04:54,000 --> 00:04:58,000
so that text value which we receive via props

87
00:04:58,000 --> 00:05:02,000
which has all the output down there in the h2 tag.

88
00:05:02,000 --> 00:05:04,000
I'm now referring to it again here

89
00:05:04,000 --> 00:05:08,000
because this is just standard JavaScript in the end

90
00:05:08,000 --> 00:05:11,000
even though this JSX code definitely doesn't look like it.

91
00:05:11,000 --> 00:05:15,000
But up here, we write standard JavaScript

92
00:05:15,000 --> 00:05:16,000
and hence, of course,

93
00:05:16,000 --> 00:05:19,000
here we can also use one of our arguments

94
00:05:19,000 --> 00:05:22,000
and if that argument turns out to be an object,

95
00:05:22,000 --> 00:05:26,000
which props is, we can also drill into that object here.

96
00:05:26,000 --> 00:05:28,000
With that, if I save this and click, "Delete",

97
00:05:28,000 --> 00:05:33,000
you see the proper text being output here as well.

98
00:05:33,000 --> 00:05:35,000
And maybe it's not clear here

99
00:05:35,000 --> 00:05:38,000
but that's another strength of React.

100
00:05:38,000 --> 00:05:41,000
Without any extra work from our side,

101
00:05:41,000 --> 00:05:46,000
these three different buttons are doing different things.

102
00:05:46,000 --> 00:05:48,000
I mean, they're always doing the same thing.

103
00:05:48,000 --> 00:05:51,000
We just defined this logic once,

104
00:05:51,000 --> 00:05:54,000
but the concrete values with which they work,

105
00:05:54,000 --> 00:05:56,000
the concrete text which they output,

106
00:05:56,000 --> 00:05:57,000
is not the same.

107
00:05:57,000 --> 00:06:00,000
Instead, it's different for every button.

108
00:06:00,000 --> 00:06:03,000
And that means that we can easily write logic

109
00:06:03,000 --> 00:06:06,000
that's specific to a specific to do,

110
00:06:06,000 --> 00:06:09,000
whilst still being able to define this logic once

111
00:06:09,000 --> 00:06:12,000
instead of three times which is great

112
00:06:12,000 --> 00:06:14,000
and makes our code way more reusable.

113
00:06:15,000 --> 00:06:18,000
But of course here, the goal is not to log something

114
00:06:18,000 --> 00:06:19,000
to the console.

115
00:06:19,000 --> 00:06:22,000
Instead, we wanna show a little overlay

116
00:06:22,000 --> 00:06:25,000
when that button is clicked and for this, of course,

117
00:06:25,000 --> 00:06:29,000
we need to first of all create that overlay.

118
00:06:29,000 --> 00:06:33,000
We need to create the HTML code that should be showing up

119
00:06:33,000 --> 00:06:35,000
and then as a second step,

120
00:06:35,000 --> 00:06:38,000
we also need to find a way of showing it conditionally.