So we got our first custom component here,
and it won't be the last component we'll work on.
At the moment,
it doesn't have any fancy styling,
but we'll add some styling soon.
But I'd like to make it a bit more dynamic.
And for that, I'll start by going to Post.jsx.
And then there, outside of the component function,
though it doesn't really matter,
I'll add a new constant called names,
which holds an array of two possible names,
Maximilian and Manuel.
And I wanna output one of the two names
whenever this component is rendered.
So basically, whenever I reload the page,
and I therefore cause React to re-render the screen,
I wanna make sure that React picks one of the two names
and outputs it on the screen.
So that it's not always Maximilian,
but we get some randomness on this website.
Now, how could we make this work?
Well, in order to make this work,
we first of all must add some logic
to this component function to pick a random name.
So we could add a constant called chosenName.
And then here, I wanna call Math.random,
this built-in random method
that's supported by browsers out of the way.
So this is absolutely not React code,
this is all built-in instead.
And, if what I get here is greater than 0.5,
I wanna pick the first name.
So names zero, otherwise names one.
So with that, I have a 50-50 chance
of picking Maximilian or Manuel.
Now this, as mentioned here, is standard JavaScript code.
And it's important to understand
that even though this will be treated
as a component by React,
it, in the end, still is a function
that will be executed by React.
And therefore, in this component function,
you can in the end run any JavaScript code you want
in that function.
It's just important that in the end,
your function returns some JSX code.
So here, I'm picking a random name.
And I now wanna output that name here
instead of always outputting Maximilian.
But, how do we get this chosenName from here to here?
Well, for that, we'll use a special syntax
that's supported by JSX and React.
Instead of hard-coding the value here
between these paragraph tags,
as we're currently doing it with Maximilian,
we add opening and closing curly braces.
Single opening and single closing curly braces.
And between those curly braces,
you can put any JavaScript expression of your choice.
Like, for example, two plus two.
If you do that and you save that,
you'll see that now we get four as a output here.
We get four here because when you use
this special curly brace syntax in your JSX code,
React will go ahead and take whatever is written
inside of those curly braces and execute it,
and then output the result
of that expression that was executed.
So in this case, we have two plus two
hence the result four is output on the screen.
And we can, of course, not just perform
mathematical calculations here,
but, instead, we can also reference variables or constants.
So here I can output chosenName.
And instead of outputting the text chosenName now,
as it would do without the curly braces,
here we get the text, chosenName,
with those curly braces,
it will instead look into that constant or variable
and output the value that's stored in there.
So now, we'll get either Maximilian or Manuel.
Right now, it's Maximilian for me here,
but as I reload this page,
you see that it switches between these two names here.
And it switches after every reload,
because a reload technically restarts the React application,
and causes all React components
to be re-rendered on the screen.
And even though this randomness is not a feature
we'll need in the finished application,
it is super important to understand
how you can output dynamic values
in your React applications.
Because even though you might not need
random values too often,
you do very often need the results of calculations
of data fetched from some backend API.
Something we'll also do later in this course
are all kinds of other dynamic values.
So this is an important piece of syntax
you must keep in mind.