Now when reusing components.
So using one at the same component multiple times
as we're doing it with Post.
There's also another important React feature you
must know to make those reused components more useful
because at the moment the component we have here,
the Post component,
is of course still fairly static.
Sure it has this random name that's being output
but in the end here
we also just have a static choice between two names.
This component isn't really useful yet.
Later when we're able to create posts
and store them in some database and fetch them from there
we wanna be able to reuse that component
with different names
and different text values that are coming from a database
for example,
so that are not hard coded into the code.
Well we don't have the database part yet.
We don't have any data fetching yet,
but we can still start preparing this component to
be more useful by adding a feature called Props to it.
For that I'll first of all get rid of that
randomness code because I don't need it anymore
and instead I wanna make sure that both the name
and the text here can actually be configured
from inside the place where this component is being used.
So from inside the app component in this case here.
So it would be great if we could use the Post component here
or anywhere else in the app, doesn't matter.
And we could pass different values
to that component just as you can pass different arguments
to one at the same function
if you're calling a function in your code.
If you have an add function that takes two numbers
and returns the sum of those two numbers
then in JavaScript you can call this function
with different arguments, right?
That's how JavaScript works.
Now it would be nice
if you could do the same thing with components
and pass different values to one at the same component
and that's where this Props feature comes into play.
React allows you to add your own attributes called Props
to your components.
For example here,
an author prop which could be Maximilian in my case here,
and then maybe a text or a body prop,
which could be "React.js is awesome."
And then the second time we use the Post
we could set a different author like Manuel
and give it a body like "Check out the full course."
So now I'm using the same Post component function here
with different values set for author and body.
This alone won't do the trick though.
If we save all files,
we now got no content on the screen.
Because whilst we're passing data
to the post component with our custom attributes here,
so with that feature called Props
we're not using these values inside of the Post component.
How would React know where the author
or body information should be output
if it should be output at all?
Well, it doesn't.
That's why we have to tell React how to treat those props.
But how do we tell React?
Well again if you have a regular function
like the add function,
you receive parameters
and you can work with these parameters then.
A and B in this simple example.
It's the same with custom components.
There you receive a parameter, a single parameter though,
and the value for this parameter will be passed
to this function by React
which should make sense because I mentioned before already
that React will be executing your component functions.
So here we can receive this parameter
and I'll name it props,
though the name is up to you
because it will be an object using this concept called props
in the React world.
So this is simply a name made up
by the React team that we get this props,
this property collection object here
as an argument in this function.
So this will always be an object what we get here.
And the special thing about this object is
that it will have all these custom attributes that were set
on the component as property names,
so as keys that we can access.
So here
since I'm setting author and body on my custom component
I can access props.author
and props.body on this props object that's passed
into this component function automatically by React.
So therefore here
in the place where I wanna output the author name,
I can output props.author,
and here where I wanna output the text
I can output props.body and remove this code here.
And with this simple yet important change
and by using this super important feature called Props,
we can save all our code files
and we got our two components back,
but now this time configured
with different values.
So it's the same component function,
it's a single component function
used with different configurations
with different values for these props.
And thanks to us using this props feature inside
of the component function,
we therefore do see
this different content on the screen.
And that's how you make components reusable.
Now as mentioned before,
not all components must be reusable,
and some components might not need any props at all.
But that's up to you as a developer.
You can build your own components
and if you have a certain component that should be used
in different places with different values
this props feature is your friend.