We've got a square screen put together.
Let's now try to create a reusable component that's going to show essentially just that right there
we can then show it three times inside of our square screen.
It'll pass in a prop of either red green or blue.
To customize the text that shows up inside that component so back inside my editor I'll find my source
components directory inside there I'll make a new file and I'm going to call this like a boat color
adjuster.
How about colored counter.
J.S. I'm gonna call it color counter because we're essentially building a small counter component of
sorts right here.
So then inside this component we'll put down some boiler plate again rather than rewriting it all from
scratch.
I'll just go back over to my square screen.
I'm going to copy everything inside of here and then paste it inside of a color counter again just to
save us ourselves a little bit of time I'll then update some variables inside of color counter so we'll
update the component name to color counter I'll update the export default to color counter and I we
can start putting together some actual implementation.
So I'm going to also import the button element from React Native.
So I've now got view tax style sheet and button so that we can put something together here.
I'm going to first begin by deleting that text element or replace it with a view inside there.
I'll place text again in fright now.
I'm just going to hard code in red so I'm going to assume that we're just building this first one.
Well then come back in and customize the text using some props.
After we get everything working so I'll give this a text of Red I'll then show a button element that
has a title of increase red I'll duplicate that down in the second one I'll give increase.
No not increase but decrease red.
There we go.
Okay.
So this looks like a good first shot.
Let's now show this inside of our square screen.
Three separate times and we'll start to customize it using props.
So I'll save this file.
Look back over the square screen at the top.
I will import color counter
from up one directory.
I'll go into components and then get the color counter file then inside of here rather than showing
a text element I'll replace it with a view inside a view.
I'll place color counter three times once again I'm using a self closing tag here because I don't expect
I have to pass in anything between the opening and closing tag.
There are reasons that we would want to do that.
We'll take a look at why we would do that later on INSIDE THE COURSE OK.
So now it's time to test this out.
I'll save it.
Flip back over I'll go to Square demo and yep that's looking pretty good.
Well maybe it doesn't look great but it's definitely essentially what we want.
And on Android we've got something very similar.
So now we need to start to customize the text inside of color counter by using the prop system.
So we're probably going to want to pass in a prop to the first color counter to indicate that it should
show red and then blue and green.
So I'm going to make up a prop name.
I think a reasonable prop name would be like color.
So I will be a string of red and I'm going to make it capitalized here because in all my mockups over
here really showing a capitalized string of red I could pass in lowercase red instead.
But then I'd just have to uppercase it or handle capitalization inside my component which is just a
little bit annoying I'll then repeat that process for the other two as well I'll change the second one
to be blue and then the last one to green.
All right.
So we can now save this file.
We can go back over to our color counter where we're going to make use of this new prop that we were
passing in.
So back inside of color counter we can receive that props object.
Remember we usually make use of D structuring and we only pull out the property we actually care about.
So rather than receiving the entire props object I'm going to instead place a set of curly braces inside
of here and list out color because once again that's the only property I really care about using we
can now make use of that color variable everywhere inside of here that we currently have written out
red.
So rather than red right here I'll replace it with red curly braces or I suppose just color bases are
on my Ed. They are red but they're not necessarily red on your editor will print out the color variable
inside there.
And now for the title right here.
Well this is going to be a little bit more complicated.
Remember I told you a little bit ago that when we place a string inside of a J a sex element we don't
need to use those really braces.
However in this case we want to use a little bit of string interpolation or string templating to essentially
inject this color variable into this string if we're using string interpolation then we do have to make
use of those curly braces.
So I'm going to wrap that string right there with curly braces and then going to replace the double
quotes with back to characters.
Again these are back to characters not a single quote.
Make sure you are using back ticks as well I can then delete read and replace it with dollar sign Curly
races and I'll refer to color inside their and now we can repeat that same process with a second title
as well.
So I'll just delete the entire string this time lace my curly braces place the back ticks I'll do decrease
dollar sign curly braces color.
All right so we're ready for another test.
So I'll save this what back.
And now I see red.
Increased red decreased red blue blue blue blue and green as well.
Very good.
All right so is looking good.
So now the last thing we have to do is start to add in some state variables and modify them from this
button element.
But there's kind of a really big question that we need to answer first.
Where are we going to place these state variables.
Should we create the state variables inside of our color counter component.
Because this is what is modifying them or should we create the state variables inside of our square
screen because this is what's going to actually use them.
So that's actually a interesting question.
Let's take a quick pause right here.
We'll come back in the next video and we'll get some guidance on where we should create our state variables.