Our header looks great but there is just one last thing about this component that I don't really care
for inside of our head or component.
Notice that the text tag right here has the hard coded value of albums.
So here's the thing.
As a user navigates through our application will almost certainly want them to see the text and that
header change over time as the user goes to like a different era.
App.
Right.
Maybe if we're selling oops or unclick we're selling not only albums in this application but we're also
selling like just individual songs or concert tickets or whatever it might be we would want that text
inside of here to change over time as such.
It be really nice if we could somehow reuse this component in different locations and not have to create
a completely new header file every time that we want some different text in here.
Right.
If we just had this hard coded albums in here I might have to make like a albums head or component and
then also a song setter.
And each time I would just be changing this text obviously it would be a horrible use of time.
We want some better way of reconfiguring or making this component more usable on the fly.
So rather than letting the header component decide what text should be displayed inside the text Complan
right here we're going to rewrite this component or refactor it slightly so that the app component will
decide what text to show in there.
So the app is what is showing the header and so it makes sense that the app when it shows the header
should be able to decide.
All right.
You know what I want to show a header and when it displays I'm going to add the text albums or maybe
songs or maybe you know whatever else there might be.
So to make sure that the app is capable of telling the header what text it should show we're going to
use a system in re-act called prompts.
So I mentioned prop's a little bit when we're using that style tag we're now going to expand on that
a little bit here.
So here's the idea.
We have the app component which is currently our root component and it is showing the Hetrick component
which is the child whenever we want to pass some data from a parent or root component to a child component.
We use the props system props as short for properties passing props as it's generally referred to as
a major part of the Relax library and it's by far one of the primary means of making components more
usable by passing a prop we allow a component like the header to be reconfigured on the fly with some
new or different form of data.
So that's the idea here.
So let's figure out how to use props by making the text in the header a value that is set by the app
component instead of something just hardcoded inside the header.
Doing this is going to be a three step process.
First we're going to identify the variable or the value that we want to be provided by the parent.
So in this case we've kind of already decided we want to provide this text right here in the parent
component.
Second we'll provide a reference to the props that's coming in from the parent component.
So because header is a child component it will be given some props object.
And so we refer to her referred to as a props object from the parent.
Finally we'll make sure that the parent component the app provides that specific Propp that the header
is expecting.
So again step 1 we know that we want this text to be provided by the parent component.
Next we're going to provide a reference to that prop's object that comes from the parent.
So whenever the header component is created it will be called with a prop's object that will be the
first argument to this function.
And so we call it simply props like So next we will replace the album's text right here to a reference
to that prop's object.
Now props is a javascript object and it will have a property that we're going to pass on it and we want
to stick that property that text inside of this GSX right here whenever we make reference to a javascript
variable inside of GSX we use curly braces so I can put curly braces on and say props dot header text
like so.
So we are now kind of entering into a contract here contract runs saying that my parent component should
be providing a header text Propp.
So now step three it's back.
It's up to us when the head or component is created we must pass in a header text.
And it must contain the text that the album or the header should be showing.
So inside the head or tag I'm going to pass in a property named specifically header text and I'm going
to give it the string albums.
So now when the header is rendered we will pass in a prop of header text.
It will have the value of albums.
Then when the header is rendered we'll take that prop's object which is a bunch of data that's coming
in from the parent.
It will have a property called header text and we will show that inside of our GSX right here.
So that is the entire cycle that's the entire thing.
One thing I want to point out right now because as we walk this video it might seem like sometimes on
choosing property names like on purpose like you know a very particular property name of header text
this property name right here of header text can be absolutely anything we want it to be anything it
can be or text can be just text it can be you know a thing to show whatever we want it to be.
I am just making a sensible default or a sensible property name of header text so that whenever I'm
looking at my app component and I see like OK I'm passing the header some configuration object.
I wonder what this property is used for.
Well with a property name of header text I'm reasonably certain or I've got like you know it's reasonable
to assume that this header text is going to be the text it's use inside the header.
OK.
So let's now test this out in the simulator refresh and hot dog we still got the album's text in here.
Now if I want to I can add in you know whatever else I want.
And it's going to appear in the header.
So now we can reuse this Headrick component over time in other locations and not have to worry about
having some static text in there.
Cool.
So this looks great.
Again props like this are passing props as we refer to it is absolute core aspect of react and we're
going to repeat this many many times over.
So the general thought process is that with props we can reuse components so we make much more frequently.
So this looks great.
Let's continue on to the next section.