Original subtitles

How can we make this component reusable?

Well, the good news is we can already reuse it.

In App.js, where I'm using it,

we can simply copy that line and paste it in.

And if we save everything,

we got the two ExpenseItems already.

So that was easy. It's super easy to reuse a component.

You can use it as often as you want.

You can add it two more times

and have four ExpenseItems overall.

That will work.

But, of course, at the moment it's not really reusable.

Yes, it's technically more than once,

but it's always displaying the same data.

And the reason for that

is that the data is baked into this component.

Now, think about regular JavaScript

without React for a second.

There, I mentioned early already, we also use functions

to split functionality across multiple smaller codebases

and also to have reusable functions

which we can call multiple times.

Now, when we write functions in JavaScript,

then we make these functions reusable

by accepting parameters.

And that allows us to call one of the same function

with different parameter values.

And, therefore, the function may and typically will produce

different results for different input values,

but it's still always the same function being called.

And React basically has the same concept built in.

We can make our components reusable

by using parameters and a concept called props in React.

Let's say in your App component,

you have a goalItem variable or constant defined

which holds a string of Finish!

And then let's say you have a custom component,

the CourseGoalItem component,

which has a list item inside of it

where this goalItem should be output.

That's just another example,

not the code we've been working on,

but it's another example.

We can have a custom component

which should output a list item

where the goalItem should be output dynamically.

The problem is that the goalItem variable lives

in the App component, not in the CourseGoalItem component.

And to a certain extent, that is good

because it makes the CourseGoalItem independent

if it doesn't store the concrete value internally.

But, of course, we wanna define

what's being output by CourseGoalItem

with help of the variable managed in App.

And we don't have direct access to the HTML code output

by some component in other components.

We can't just send our stored data there,

but, instead, we can utilize a concept called props.

We can pass data to the custom component

by adding a attribute.

And inside of that component,

we can then get access to all these attributes

which might have been set on our custom component.

Again, we're basically building

our own custom HTML elements.

And just as HTML elements can have attributes,

it turns out that with React,

our own custom components can also have attributes.

There, this concept is just called props

instead of attributes.

And props simply stands for properties.

We can set properties of our own custom components.

Now, how does this props concept work though?

In ExpenseItem, we have the date, the title, and the amount,

and we'd like to output this here,

but it shouldn't be stored in here but instead in App.js.

There, indeed, in this App component,

we could have another constant or variable,

expenses, which is an array, so multiple expense items.

And let's say every expense here

is a simple JavaScript object

which now has a title like Car Insurance,

which also has an amount like the 294.67,

and where we have a date

like this new Date we created here in ExpenseItem before.

Now, again, we don't just have one,

but we have, let's say, three such expenses here,

or maybe four.

Now, to make sure we don't have to type these all by hand,

attached you find a simple text file,

which contains four dummy expense items,

which you can just wrap and copy into your expenses array.

These objects also have an extra id field

which we don't need at the moment though.

Nonetheless, now you will have four objects

inside of this expenses array.

And now we want to pass the data of these different objects

to these different ExpenseItems.

That means we wanna make these ExpenseItems configurable

from outside, you could say.

The data should not be stored inside of them

but instead received from outside.

And that works with this props concept I just mentioned.

In App.js, we can simply add attributes

to these custom HTML elements, so to these components.

I'm using these terms interchangeably here.

And, for example, we could add a title attribute

here to ExpenseItem

and set this to a value of Toilet Paper.

So we can just type Toilet Paper here.

But now I wouldn't yet again be hard-coding some data

in this JSX code.

Since we already have this expenses array here,

I also can dynamically retrieve

the title stored in this first ExpenseItem

for this first ExpenseItem here.

And we can do this

by, again, using this single-curly-brace syntax.

We cannot just use this

between opening and closing tags of elements,

we can also use it for assigning values to attributes.

And here I can then access expenses, which is this array,

there the first item with index zero,

and there, this first item, like all items, is an object

which has a title property, for example.

So we can access .title here.

And now this title is being passed to this ExpenseItem.

Now, we can do the same for the amount.

We set, let's say, an amount attribute.

And these attribute names, by the way,

are totally up to you.

I'm going with title and amount here,

but you could pick different things.

And as a value for amount,

I, again, access expenses and the first expense there

and then the amount field.

And last but not least, we can add a date attribute

and access expenses and there the first expense .date.

You just have to make sure that the part after the dot

matches the property names here

because we are accessing these objects.

Now, I'll hit the auto-format code

to make this easier to read

by splitting these across multiple lines.

We can now do the same for the other ExpenseItems.

So I'll just repeat this

but then access the, oops, the second expense here

and the third expense with index two

and the fourth expense with index three.

Now, if we save that, we see no change, though,

because we only did the first half

of the work we need to do.

We added these attributes with any names of our choice here

because these are our custom elements,

hence these attribute names are up to us.

But inside of that component code,

so inside of ExpenseItem.js,

we also now need to do something

with these received attribute values,

and that's the half which is missing.

Now, the question is how do we get access to the values

defined in the place where we use our custom components?

And the answer is parameters.

I mentioned that in regular JavaScript,

we use parameters for passing data into functions,

and it's kind of similar for React.

However, we're now not getting a title

and an amount and a date parameter, as you might think,

but, instead, we get one parameter.

React will ensure that we get one parameter

in every component which we use as a component,

like we're doing it here for ExpenseItem.

And that one parameter will be an object

which holds all the received attributes as properties,

hence the name props for the overall concept.

Therefore, we get one parameter,

and you can name this parameter whatever you want.

It's your function. You could name it data.

But, typically, it's named props

to make it clear that this is this object

which holds all the values we get

for the attributes on our custom element.

And to be precise,

we get key-value pairs in this props object here

which is passed in by React automatically.

The keys will be the attribute names defined here,

so title, amount, and date in my case.

And the values, of course, will be the values set here.

So if I now wanna output the title received

here in this h2 tag,

I can now access props.title like this,

getting access to this props parameter

and then there to the title property

which will exist because we set a title attribute.

Now, if you chose a different name than title here,

like, for example, name,

if you chose that as a name, for example,

then you have to access props.name here.

So the key which you access on your props object

has to be the name you picked for your attribute.

Now, here I'll go back to title

and therefore adjust it here in both places again,

but you have to make sure that this matches.

Otherwise, it will not work.

Now, which names you choose,

if that's title or name or text or whatever,

that's up to you, it's your component.

But, of course, you typically wanna choose prop names

and therefore attribute names

which are self-explanatory and which makes sense.

So since we're passing in the amount here,

amount makes sense.

Something like someNumber would be valid

but wouldn't make a lot of sense, I guess,

so I'll revert that.

Now, therefore, in ExpenseItem,

we can not just output props.title but also props.amount,

and here for the date, props.date.toISOString.

And that means we can now get rid

of these three constants here

since we now get all the data we need

from outside this component.

We're not defining it inside of the ExpenseItem component,

inside of this function,

but, instead, it's in the end defined in App.js

and passed into ExpenseItem

for the different usages of ExpenseItem through attributes.

And that's how you share data between React components.

You can make your components truly reusable and configurable

by using this props concept,

which is one of the key concepts React has to offer.

You'll use props all the time, so keep it in mind.

It's super important.

Props is a super important concept

because it allows you to make your components reusable,

and it allows you to pass data

from another component to this component.

And hence if we now have a look,

we see these different expenses are rendered

with different titles, different dates,

and different amounts.