Now that we've got our list of colors that's being updated every time we press that button we can now
try to render out a list of view elements where each element is going to be assigned a different one
of the random colors inside of our colors array.
Remember if we want to build a list of elements out of some array of data we can make use of that flat
list component.
So I'm going to import flat list from React Native at the top then underneath this existing view I'm
going to leave The View right there for just a moment because we're going to reuse that code in just
a moment.
So I'm going to place a new flat list and remember the different properties that we have to specify.
First off we're going to provide data.
So this is going to be our array of pieces of data that we want to turn into a list.
In this case all the colors after that will define render item.
Remember this is going to be a function that's going to be called.
With every element inside of our array.
The first argument has a lot of different pieces of data inside of it or a lot of different properties.
The only one that you and I really care about is the index property may not index but item that item
right there is going to be some element out of our colors array.
So I would expect item is going to be something like our G.B. and then whatever value we randomly generated
so now from render item we want to return essentially this exact view element right here.
So I gonna take that view element we already wrote or cut it and I'll paste it in after that return
statement.
Now the only change we need to make is we're going to ensure that rather than using a brand new randomly
generated color we're going to instead use the random color that we already generated and is available
inside this function as item so I'll delete random argy bargy over there and change it to item and then
remember whenever we use a flat list we also have to define that key extractor function.
So I'm going to also define key extractor.
This is going to be a function that gets called with our item.
Now remember in this case we don't have to use any d structuring here.
We only have to use d structuring on render item.
So in this case we just receive our string directly.
And remember the requirements of a key just has to be unique inconsistent.
So in this case the RG B string that we're generating.
Well that's probably going to be unique and it's definitely going to be consistent across re renders
as well.
So from key extractor we'll just return item like so and that should pretty much be it.
So I'll save this and we can do a quick test so back on my device I'll go to the color demo and we'll
tap on added color and I'll do it again and again and again and again and yep that's looking pretty
good.
So every time we tap this thing we are updating some piece of state that update is causing our entire
component to re render itself.
So the flatness component is going to get that new list of data and it's going to call render item for
each additional string that we have inside that array.
You'll notice that my list of colors is going off the screen now but remember flat list is going to
automatically make them scalable so I can scroll on down and see all the different colors I have generated
and I'll test this out really quickly on Android as well.
So I'll go to my color demo I'll tap on that a couple of times yep got my colors and I can scroll through
them as well.
Perfect.
All right.
So hopefully this whole state system is making a little bit more sense now but well we might still need
a little bit more practice.
So let's try out one more little sample application around state in the next video as well.