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.