1
00:00:02,000 --> 00:00:04,000
So we got our first custom component here,

2
00:00:04,000 --> 00:00:08,000
and it won't be the last component we'll work on.

3
00:00:08,000 --> 00:00:08,000
At the moment,

4
00:00:08,000 --> 00:00:10,000
it doesn't have any fancy styling,

5
00:00:10,000 --> 00:00:12,000
but we'll add some styling soon.

6
00:00:12,000 --> 00:00:15,000
But I'd like to make it a bit more dynamic.

7
00:00:15,000 --> 00:00:19,000
And for that, I'll start by going to Post.jsx.

8
00:00:19,000 --> 00:00:22,000
And then there, outside of the component function,

9
00:00:22,000 --> 00:00:24,000
though it doesn't really matter,

10
00:00:24,000 --> 00:00:27,000
I'll add a new constant called names,

11
00:00:27,000 --> 00:00:30,000
which holds an array of two possible names,

12
00:00:30,000 --> 00:00:33,000
Maximilian and Manuel.

13
00:00:33,000 --> 00:00:35,000
And I wanna output one of the two names

14
00:00:35,000 --> 00:00:37,000
whenever this component is rendered.

15
00:00:37,000 --> 00:00:40,000
So basically, whenever I reload the page,

16
00:00:40,000 --> 00:00:44,000
and I therefore cause React to re-render the screen,

17
00:00:44,000 --> 00:00:47,000
I wanna make sure that React picks one of the two names

18
00:00:47,000 --> 00:00:49,000
and outputs it on the screen.

19
00:00:49,000 --> 00:00:51,000
So that it's not always Maximilian,

20
00:00:51,000 --> 00:00:55,000
but we get some randomness on this website.

21
00:00:56,000 --> 00:00:57,000
Now, how could we make this work?

22
00:00:58,000 --> 00:01:00,000
Well, in order to make this work,

23
00:01:00,000 --> 00:01:03,000
we first of all must add some logic

24
00:01:03,000 --> 00:01:06,000
to this component function to pick a random name.

25
00:01:06,000 --> 00:01:09,000
So we could add a constant called chosenName.

26
00:01:11,000 --> 00:01:14,000
And then here, I wanna call Math.random,

27
00:01:14,000 --> 00:01:16,000
this built-in random method

28
00:01:16,000 --> 00:01:19,000
that's supported by browsers out of the way.

29
00:01:19,000 --> 00:01:22,000
So this is absolutely not React code,

30
00:01:22,000 --> 00:01:24,000
this is all built-in instead.

31
00:01:24,000 --> 00:01:29,000
And, if what I get here is greater than 0.5,

32
00:01:29,000 --> 00:01:32,000
I wanna pick the first name.

33
00:01:32,000 --> 00:01:36,000
So names zero, otherwise names one.

34
00:01:38,000 --> 00:01:40,000
So with that, I have a 50-50 chance

35
00:01:40,000 --> 00:01:43,000
of picking Maximilian or Manuel.

36
00:01:43,000 --> 00:01:47,000
Now this, as mentioned here, is standard JavaScript code.

37
00:01:47,000 --> 00:01:49,000
And it's important to understand

38
00:01:49,000 --> 00:01:52,000
that even though this will be treated

39
00:01:52,000 --> 00:01:54,000
as a component by React,

40
00:01:54,000 --> 00:01:56,000
it, in the end, still is a function

41
00:01:56,000 --> 00:01:59,000
that will be executed by React.

42
00:01:59,000 --> 00:02:01,000
And therefore, in this component function,

43
00:02:01,000 --> 00:02:05,000
you can in the end run any JavaScript code you want

44
00:02:05,000 --> 00:02:06,000
in that function.

45
00:02:07,000 --> 00:02:09,000
It's just important that in the end,

46
00:02:09,000 --> 00:02:13,000
your function returns some JSX code.

47
00:02:14,000 --> 00:02:16,000
So here, I'm picking a random name.

48
00:02:16,000 --> 00:02:18,000
And I now wanna output that name here

49
00:02:18,000 --> 00:02:21,000
instead of always outputting Maximilian.

50
00:02:21,000 --> 00:02:25,000
But, how do we get this chosenName from here to here?

51
00:02:26,000 --> 00:02:29,000
Well, for that, we'll use a special syntax

52
00:02:29,000 --> 00:02:33,000
that's supported by JSX and React.

53
00:02:33,000 --> 00:02:35,000
Instead of hard-coding the value here

54
00:02:35,000 --> 00:02:37,000
between these paragraph tags,

55
00:02:37,000 --> 00:02:40,000
as we're currently doing it with Maximilian,

56
00:02:40,000 --> 00:02:43,000
we add opening and closing curly braces.

57
00:02:43,000 --> 00:02:48,000
Single opening and single closing curly braces.

58
00:02:48,000 --> 00:02:51,000
And between those curly braces,

59
00:02:51,000 --> 00:02:55,000
you can put any JavaScript expression of your choice.

60
00:02:55,000 --> 00:02:57,000
Like, for example, two plus two.

61
00:02:58,000 --> 00:03:02,000
If you do that and you save that,

62
00:03:02,000 --> 00:03:05,000
you'll see that now we get four as a output here.

63
00:03:06,000 --> 00:03:09,000
We get four here because when you use

64
00:03:09,000 --> 00:03:13,000
this special curly brace syntax in your JSX code,

65
00:03:13,000 --> 00:03:17,000
React will go ahead and take whatever is written

66
00:03:17,000 --> 00:03:21,000
inside of those curly braces and execute it,

67
00:03:21,000 --> 00:03:23,000
and then output the result

68
00:03:23,000 --> 00:03:26,000
of that expression that was executed.

69
00:03:26,000 --> 00:03:27,000
So in this case, we have two plus two

70
00:03:27,000 --> 00:03:31,000
hence the result four is output on the screen.

71
00:03:32,000 --> 00:03:34,000
And we can, of course, not just perform

72
00:03:34,000 --> 00:03:36,000
mathematical calculations here,

73
00:03:36,000 --> 00:03:41,000
but, instead, we can also reference variables or constants.

74
00:03:41,000 --> 00:03:44,000
So here I can output chosenName.

75
00:03:44,000 --> 00:03:47,000
And instead of outputting the text chosenName now,

76
00:03:47,000 --> 00:03:50,000
as it would do without the curly braces,

77
00:03:50,000 --> 00:03:53,000
here we get the text, chosenName,

78
00:03:53,000 --> 00:03:56,000
with those curly braces,

79
00:03:56,000 --> 00:03:59,000
it will instead look into that constant or variable

80
00:03:59,000 --> 00:04:03,000
and output the value that's stored in there.

81
00:04:03,000 --> 00:04:06,000
So now, we'll get either Maximilian or Manuel.

82
00:04:07,000 --> 00:04:09,000
Right now, it's Maximilian for me here,

83
00:04:09,000 --> 00:04:11,000
but as I reload this page,

84
00:04:11,000 --> 00:04:15,000
you see that it switches between these two names here.

85
00:04:16,000 --> 00:04:18,000
And it switches after every reload,

86
00:04:18,000 --> 00:04:23,000
because a reload technically restarts the React application,

87
00:04:23,000 --> 00:04:25,000
and causes all React components

88
00:04:25,000 --> 00:04:27,000
to be re-rendered on the screen.

89
00:04:27,000 --> 00:04:30,000
And even though this randomness is not a feature

90
00:04:30,000 --> 00:04:32,000
we'll need in the finished application,

91
00:04:32,000 --> 00:04:35,000
it is super important to understand

92
00:04:35,000 --> 00:04:37,000
how you can output dynamic values

93
00:04:37,000 --> 00:04:40,000
in your React applications.

94
00:04:40,000 --> 00:04:41,000
Because even though you might not need

95
00:04:41,000 --> 00:04:43,000
random values too often,

96
00:04:43,000 --> 00:04:47,000
you do very often need the results of calculations

97
00:04:47,000 --> 00:04:51,000
of data fetched from some backend API.

98
00:04:51,000 --> 00:04:54,000
Something we'll also do later in this course

99
00:04:54,000 --> 00:04:58,000
are all kinds of other dynamic values.

100
00:04:58,000 --> 00:05:00,000
So this is an important piece of syntax

101
00:05:00,000 --> 00:05:01,000
you must keep in mind.