In this video we're going to wire up a new state variable to our color screen component to do so.
We're going to go through the same series of steps that we just did inside of our last mini application.
I'm going to first begin by going up to my input statement from react up here.
And I'm going to also import use states.
Remember we refer to this thing as a hook and as a function that adds some additional functionality
to a function component so then inside of my color screen I'm going to declare a new state variable.
So I'll say const those square brackets.
Say colors that's going to call my state variable and set colors I'll then call you state and then inside
of my you state call right here I'll provide the default value or starting value or this colors variable.
So as we mentioned we want this starting variable to be a empty array like so I'll get.
So now inside of our button element we're going to add in an on press handler and whenever a user taps
that thing we're going to try to update the value of colors using these set colors setter so on my button
elements I'll add in an on press prop and I'll pass it an arrow function like so I'm going gonna give
this arrow function a body just to give myself a little bit of space to work with so then inside of
here we need to somehow add a new color to our colors array without somehow modifying it.
In other words remember we don't want to make any changes to the state variable whatsoever you might
think that we could add in a new color by adding something like colors not push.
But this push method is going to modify that array.
And again we don't want to ever modify these variables whatsoever.
The only way we change it is through the use of set colors so in order to add in a new element using
the set colors function we're going to write out set colors and we're gonna write out some kind of interesting
syntax here I'm gonna put in a set of square brackets and then dot dot dot.
Colors and then a comma and they're going to add in our new color by calling Random r G.B. so random
our G.B. like so.
So what's going on here.
Well essentially we are creating a brand new array by putting in a new set of curly brace or new square
brackets right here.
The dot dot dot colors then means take a look at the colors array.
Take all the elements inside there and add them inside of this new Array.
Now that does not remove anything out of colors.
It's not a destructive operation using this dot dot dot just says take a copy of everything inside that
array and add it into this new one right here.
And then after that we're going to add in a new entry by calling Random r G.B. so the result should
be that we call set colors with a brand new array that has everything from the original colors variable
right here and our brand new one okay.
And that should be at so far right now rather than focusing on how we can somehow make use of that array
of colors by showing a bunch of different views.
Let's instead just do a console log of colors and see how that array changes over time.
It's all save this file and we'll do a quick test.
I'll go to color demo.
We see one color automatically remember.
That's because we have a hardcoded view inside of here and I'll tap on add a color like once twice and
three times you'll notice that every time we click on that button the square right there changes.
Why is that.
Well remember anytime we change a state variable in any way like with set colors right here we're going
to rerun this entire component when this can tie entire component reruns.
That means that we update this view element as well.
And so that view element it's a brand new randomly generated color.
So that's why we're seeing that background color change every single time we tap that button.
Now let's also take a look at the console log.
We should see inside of our terminal.
So I'll flip back over my terminal.
Here we go.
And this looks pretty good to me.
So we've got an empty array.
That's our starting initial value.
We then tapped on the button one time and we added in a new color string to our array.
We then tapped it a second time and we got a second color and we tapped it a third time and got a third
color added in as well.
So this is perfect.
We are now tracking some piece of data or some collection of data I suppose in this case an array of
colors that's changing over time.
And as we just saw every time we change that piece of data our component re-enters itself.
And so it updates the content on the screen now that we've got this array of colors right here.
Let's take a quick pause.
When we come back the next video we're going to render a list of all these different colors by generating
a list of different views.
So quick pause and I'll see you in just a minute.