All language subtitles for 012 Working with _props_ & Dynamic Content_en

To make our component a bit more configurable

and accept different data,

we in the end wanna utilize a concept,

which we know from the function world

and from standard HTML elements.

In the place where we use Todo, so in this app component

it would be nice if we could add an attribute

like text or title, totally up to you.

Let's go with text and then set this to some value,

like Learn React on the first Todo,

then Master React on the second Todo,

and let's say,

Explore the full React course, in the third Todo.

Now, it would be nice if you could do that.

But if I add this here, in App.js and save it,

this has no effect on what we see on the screen.

The reason for this

is that we're setting these custom attributes

but then the Todo.js file,

we have no code that would pick up those values.

Nonetheless, this is how you do pass data into a component.

We just also need to write some code in the component

to then accept and use those received values.

And we do that with a concept called props.

We accept the parameter in our function component

and in every function component,

we can accept that parameter,

and that parameter is typically called props.

You can name it whatever you want,

since it's your code, but it's called props

because this React concept is called props.

This will be an object.

Props will be a JavaScript object

where all the attributes added on the element

are in the end available as key value pairs

in this props object.

So here, these attribute names will be the keys

and the values will be the values.

So props inside of the Todo component

will be an object now, that has a text property

and then different values for this text property.

And if you named this attribute differently,

that's also okay,

you will then have a property of that name

in your props object.

So therefore now here, in this h2 tag,

we wanna output

this text we're getting on this props object.

Now in standard JavaScript,

we access object properties with the dot notation.

So we could output props.text here

to access the text property in the props object

and therefore the values stored in this property.

But if we do this here,

we just see props.text as our output.

The reason for this is that everything here

in this JSX block is treated as HTML elements or plain text.

The good news, however is

that we can also output dynamic expressions

as part of the JSX code.

We can tell React that

something should not be treated as plain text,

but instead as a JavaScript expression

that should be evaluated.

And we do this with a special syntax

inside of this JSX code, which looks like this.

Opening and closing curly braces, single curly braces.

And between those braces

you can have any JavaScript expression you want

like for example, two plus two.

Now this will not be treated as plain text

but instead it will be executed as JavaScript.

So if I save, we see four, the result of this expression.

Now you can have any single line expression in here

but you can't have any block statements here.

So adding a if check here would not work.

But what does work is referring to props.text here.

So simply outputting the result

of accessing this text property on the props object.

If we add this code and save this,

we see our different texts here for the different Todos.

And now we built our own truly

reusable React component here, the Todo component.

It is truly reusable

because now it does not just have some hard coded structure

and text inside of it,

but also some dynamic code using this core concept

built into React, the props concept

for accepting data from outside.

So from the place where it is being rendered.

That is a key concept, this props concept

and that is how you build re-usable custom elements,

re-usable components.

And that's there for a major first step here.

Now let's make sure that we handle events,

that we handle our click on the delete button

and that we then also change something on the screen

when the button is clicked.

To be precise that we present this nice overlay,

when that delete button is clicked.