1
00:00:02,000 --> 00:00:04,000
To make our component a bit more configurable

2
00:00:04,000 --> 00:00:07,000
and accept different data,

3
00:00:07,000 --> 00:00:09,000
we in the end wanna utilize a concept,

4
00:00:09,000 --> 00:00:11,000
which we know from the function world

5
00:00:11,000 --> 00:00:14,000
and from standard HTML elements.

6
00:00:14,000 --> 00:00:18,000
In the place where we use Todo, so in this app component

7
00:00:18,000 --> 00:00:21,000
it would be nice if we could add an attribute

8
00:00:21,000 --> 00:00:24,000
like text or title, totally up to you.

9
00:00:24,000 --> 00:00:28,000
Let's go with text and then set this to some value,

10
00:00:28,000 --> 00:00:31,000
like Learn React on the first Todo,

11
00:00:33,000 --> 00:00:36,000
then Master React on the second Todo,

12
00:00:36,000 --> 00:00:38,000
and let's say,

13
00:00:38,000 --> 00:00:42,000
Explore the full React course, in the third Todo.

14
00:00:42,000 --> 00:00:45,000
Now, it would be nice if you could do that.

15
00:00:45,000 --> 00:00:48,000
But if I add this here, in App.js and save it,

16
00:00:48,000 --> 00:00:52,000
this has no effect on what we see on the screen.

17
00:00:52,000 --> 00:00:53,000
The reason for this

18
00:00:53,000 --> 00:00:57,000
is that we're setting these custom attributes

19
00:00:57,000 --> 00:00:59,000
but then the Todo.js file,

20
00:00:59,000 --> 00:01:03,000
we have no code that would pick up those values.

21
00:01:03,000 --> 00:01:08,000
Nonetheless, this is how you do pass data into a component.

22
00:01:08,000 --> 00:01:11,000
We just also need to write some code in the component

23
00:01:11,000 --> 00:01:15,000
to then accept and use those received values.

24
00:01:15,000 --> 00:01:19,000
And we do that with a concept called props.

25
00:01:19,000 --> 00:01:23,000
We accept the parameter in our function component

26
00:01:23,000 --> 00:01:26,000
and in every function component,

27
00:01:26,000 --> 00:01:28,000
we can accept that parameter,

28
00:01:28,000 --> 00:01:31,000
and that parameter is typically called props.

29
00:01:31,000 --> 00:01:33,000
You can name it whatever you want,

30
00:01:33,000 --> 00:01:35,000
since it's your code, but it's called props

31
00:01:35,000 --> 00:01:39,000
because this React concept is called props.

32
00:01:39,000 --> 00:01:40,000
This will be an object.

33
00:01:40,000 --> 00:01:42,000
Props will be a JavaScript object

34
00:01:42,000 --> 00:01:46,000
where all the attributes added on the element

35
00:01:46,000 --> 00:01:49,000
are in the end available as key value pairs

36
00:01:49,000 --> 00:01:52,000
in this props object.

37
00:01:52,000 --> 00:01:55,000
So here, these attribute names will be the keys

38
00:01:55,000 --> 00:01:59,000
and the values will be the values.

39
00:01:59,000 --> 00:02:02,000
So props inside of the Todo component

40
00:02:02,000 --> 00:02:05,000
will be an object now, that has a text property

41
00:02:05,000 --> 00:02:09,000
and then different values for this text property.

42
00:02:09,000 --> 00:02:12,000
And if you named this attribute differently,

43
00:02:12,000 --> 00:02:13,000
that's also okay,

44
00:02:13,000 --> 00:02:16,000
you will then have a property of that name

45
00:02:16,000 --> 00:02:18,000
in your props object.

46
00:02:18,000 --> 00:02:21,000
So therefore now here, in this h2 tag,

47
00:02:21,000 --> 00:02:22,000
we wanna output

48
00:02:22,000 --> 00:02:26,000
this text we're getting on this props object.

49
00:02:26,000 --> 00:02:28,000
Now in standard JavaScript,

50
00:02:28,000 --> 00:02:32,000
we access object properties with the dot notation.

51
00:02:32,000 --> 00:02:35,000
So we could output props.text here

52
00:02:35,000 --> 00:02:38,000
to access the text property in the props object

53
00:02:38,000 --> 00:02:42,000
and therefore the values stored in this property.

54
00:02:42,000 --> 00:02:43,000
But if we do this here,

55
00:02:43,000 --> 00:02:47,000
we just see props.text as our output.

56
00:02:47,000 --> 00:02:49,000
The reason for this is that everything here

57
00:02:49,000 --> 00:02:54,000
in this JSX block is treated as HTML elements or plain text.

58
00:02:56,000 --> 00:02:58,000
The good news, however is

59
00:02:58,000 --> 00:03:02,000
that we can also output dynamic expressions

60
00:03:02,000 --> 00:03:04,000
as part of the JSX code.

61
00:03:04,000 --> 00:03:06,000
We can tell React that

62
00:03:06,000 --> 00:03:09,000
something should not be treated as plain text,

63
00:03:09,000 --> 00:03:12,000
but instead as a JavaScript expression

64
00:03:12,000 --> 00:03:14,000
that should be evaluated.

65
00:03:14,000 --> 00:03:16,000
And we do this with a special syntax

66
00:03:16,000 --> 00:03:20,000
inside of this JSX code, which looks like this.

67
00:03:20,000 --> 00:03:25,000
Opening and closing curly braces, single curly braces.

68
00:03:27,000 --> 00:03:28,000
And between those braces

69
00:03:28,000 --> 00:03:31,000
you can have any JavaScript expression you want

70
00:03:31,000 --> 00:03:34,000
like for example, two plus two.

71
00:03:34,000 --> 00:03:37,000
Now this will not be treated as plain text

72
00:03:37,000 --> 00:03:40,000
but instead it will be executed as JavaScript.

73
00:03:40,000 --> 00:03:44,000
So if I save, we see four, the result of this expression.

74
00:03:45,000 --> 00:03:49,000
Now you can have any single line expression in here

75
00:03:49,000 --> 00:03:52,000
but you can't have any block statements here.

76
00:03:52,000 --> 00:03:55,000
So adding a if check here would not work.

77
00:03:55,000 --> 00:04:00,000
But what does work is referring to props.text here.

78
00:04:00,000 --> 00:04:02,000
So simply outputting the result

79
00:04:02,000 --> 00:04:06,000
of accessing this text property on the props object.

80
00:04:07,000 --> 00:04:10,000
If we add this code and save this,

81
00:04:10,000 --> 00:04:14,000
we see our different texts here for the different Todos.

82
00:04:15,000 --> 00:04:18,000
And now we built our own truly

83
00:04:18,000 --> 00:04:22,000
reusable React component here, the Todo component.

84
00:04:22,000 --> 00:04:25,000
It is truly reusable

85
00:04:25,000 --> 00:04:28,000
because now it does not just have some hard coded structure

86
00:04:28,000 --> 00:04:30,000
and text inside of it,

87
00:04:30,000 --> 00:04:35,000
but also some dynamic code using this core concept

88
00:04:35,000 --> 00:04:38,000
built into React, the props concept

89
00:04:38,000 --> 00:04:41,000
for accepting data from outside.

90
00:04:41,000 --> 00:04:44,000
So from the place where it is being rendered.

91
00:04:45,000 --> 00:04:47,000
That is a key concept, this props concept

92
00:04:47,000 --> 00:04:51,000
and that is how you build re-usable custom elements,

93
00:04:51,000 --> 00:04:54,000
re-usable components.

94
00:04:54,000 --> 00:04:58,000
And that's there for a major first step here.

95
00:04:58,000 --> 00:05:01,000
Now let's make sure that we handle events,

96
00:05:01,000 --> 00:05:03,000
that we handle our click on the delete button

97
00:05:03,000 --> 00:05:07,000
and that we then also change something on the screen

98
00:05:07,000 --> 00:05:08,000
when the button is clicked.

99
00:05:08,000 --> 00:05:13,000
To be precise that we present this nice overlay,

100
00:05:13,000 --> 00:05:15,000
when that delete button is clicked.