All language subtitles for 012 Outputting Dynamic Data & Working with Expressions in JSX_en

So now we know how to style our components.

And again, we're definitely not done here,

this is not the final look I wanna have.

But before we dig deeper into tweaking the final look

and adding more UI elements,

let's think about one maybe obvious problem.

We will probably not just have one expense

and definitely not an expense

where the data is just hard coded

into the component as it is here.

The date is hard coded here,

the title is hard coded, the amount is hard coded

and it's the only expense we have.

In our final tracker we wanna have

an unlimited amount of expenses if we want to.

We want to have multiple expense item components in action.

And after all

that is one of the core ideas behind components.

It's not just a separation of concerns,

it's also there reusability.

We wanna define a component

and its HTML code once

and then we want to be able to reuse it.

And at the moment

we're not able to do that.

Therefore, that will be the next problem we'll work on.

But before we work on that

there's another problem which we have to solve first.

And that's something I just mentioned,

that all that data is hard coded here in this JSX code.

This is unrealistic, some data may be hard coded sometimes

but here for an expense item,

something like the date and the title

and the amount would typically be dynamic,

which means it's not hard coded in the HTML code.

Instead we receive that data from somewhere,

for example from the user who entered it into a form

and we then output it dynamically.

Now for the moment we don't have the capabilities yet

to receive it from the user,

but we can fake dynamic data

by at least adding more

than just HTML code to this component.

Because after all, we must not forget

that a component in React is just a function.

And that earlier I mentioned

that components are the combination of HTML,

to some extent CSS and also JavaScript.

Now we definitely see HTML in action.

We also saw some CSS being added

but where's the JavaScript?

Other than that being a function.

Well, let's add some JavaScript code in that function

before we return.

For example, let's add a constant,

so a variable which may never change

and in there let's store a date

by using the built in date constructor

which comes with JavaScript.

Let's give this constant a name,

for example expense date, sounds like a fitting name.

And then let's maybe set an initial date value here

which is the year 2021,

March as a month.

And since the month field here starts at zero,

March has the number two

and then there the 28th.

This is how we can create such a date object

and this, and that's really important to me

is just regular JavaScript,

has nothing to do with React.

And we can and we typically do

have JavaScript code like this in our components

here just to create some dummy data later in the course

and in your React applications

that could be any kind of code.

For example to send a HTTP request

and fetch data from a database, to validate user input

or to do any other kind of task.

So here we have our expense date,

we can also have our expense title here

which is maybe car insurance.

So a simple string stored in this constant

and then our expense amount,

which is let's say a number 294

dot 67.

So we have these three constants,

regular JavaScript code.

And we now wanna output these values here

in this HTML code.

And that is a typical task,

typically you don't have data hard coded in HTML.

Instead to output dynamic data

you use a special syntax React gives you

inside of these JSX code snippets.

You can replace hard coded data

with opening and closing curly braces.

Single curly braces opening and closing.

And the special thing about these curly braces

inside of your JSX code snippets

is that in these curly braces between them,

you can run basic JavaScript expressions.

For example, one plus one,

you can execute something like this there

and it's now the result of this expression

which will be output on the screen.

So if I run one plus one between curly braces here,

we see two.

We can also do something like

math random here

and generate a random number with the built in math object.

And we see the number here

and every time I reload

I get a new number of course.

Now that's something we can do.

Now here. I don't wanna get a random number,

I don't wanna add one plus one.

Instead, I want to refer to the value stored

in this constant.

And therefore we can just repeat that constant name here.

This is also a valid JavaScript expression

just pointing at a variable or a constant.

In this case a constant.

And now JavaScript will extract the value

stored in this constant

and basically inject it here

into this HTML code, so to say.

So if I now save that,

we again see car insurance here just like before

but now it's not hard coded in the HTML code

but instead here its output dynamically

and the concrete value is taken from that constant.

There of course it's still hard coded,

but it's just a first step.

Now we can do the same for the amount.

So here after the dollar sign

which I will leave hard coded for now.

We can point at expense amount

and for the date we can do something similar.

Here we can output expense date,

though for the date we have to keep in mind

that it's a date object.

And therefore if we try to save it like this

it just breaks.

Because this being a date object

it can't be output as texts like this.

However, we can call to ISO string for example,

a built in method available on all date objects

to output it as a string

and now we see this at least.

Not super readable

but a first step.

Now we will refine and fine tune

the way this is being output later.

For the moment we just achieved

one important thing.

We now no longer work

with hard coded text in our HTML code

but instead we have these dynamic placeholders,

you could say.

Where the concrete value can be the result of a calculation

of a HTTP requests or as it is here at the moment

the value stored in a constant or variable.

And now with that out of the way

we can move on

and we can take a closer look

at how we can make this expense item more reusable.

So that it's not always the same data

which we're outputting.

And so that we can have multiple expense items

based on one of the same component with different data.