1 00:00:00,870 --> 00:00:04,980 Now that we've got our list of colors that's being updated every time we press that button we can now 2 00:00:04,980 --> 00:00:09,930 try to render out a list of view elements where each element is going to be assigned a different one 3 00:00:09,960 --> 00:00:12,610 of the random colors inside of our colors array. 4 00:00:12,750 --> 00:00:18,120 Remember if we want to build a list of elements out of some array of data we can make use of that flat 5 00:00:18,120 --> 00:00:19,440 list component. 6 00:00:19,440 --> 00:00:26,330 So I'm going to import flat list from React Native at the top then underneath this existing view I'm 7 00:00:26,330 --> 00:00:29,870 going to leave The View right there for just a moment because we're going to reuse that code in just 8 00:00:29,870 --> 00:00:31,040 a moment. 9 00:00:31,040 --> 00:00:36,860 So I'm going to place a new flat list and remember the different properties that we have to specify. 10 00:00:36,860 --> 00:00:39,030 First off we're going to provide data. 11 00:00:39,080 --> 00:00:43,810 So this is going to be our array of pieces of data that we want to turn into a list. 12 00:00:43,910 --> 00:00:48,330 In this case all the colors after that will define render item. 13 00:00:48,340 --> 00:00:51,700 Remember this is going to be a function that's going to be called. 14 00:00:51,700 --> 00:00:54,190 With every element inside of our array. 15 00:00:54,190 --> 00:00:58,680 The first argument has a lot of different pieces of data inside of it or a lot of different properties. 16 00:00:58,750 --> 00:01:05,990 The only one that you and I really care about is the index property may not index but item that item 17 00:01:05,990 --> 00:01:09,850 right there is going to be some element out of our colors array. 18 00:01:09,890 --> 00:01:16,640 So I would expect item is going to be something like our G.B. and then whatever value we randomly generated 19 00:01:17,580 --> 00:01:23,390 so now from render item we want to return essentially this exact view element right here. 20 00:01:23,390 --> 00:01:28,130 So I gonna take that view element we already wrote or cut it and I'll paste it in after that return 21 00:01:28,130 --> 00:01:29,390 statement. 22 00:01:29,390 --> 00:01:34,250 Now the only change we need to make is we're going to ensure that rather than using a brand new randomly 23 00:01:34,250 --> 00:01:38,930 generated color we're going to instead use the random color that we already generated and is available 24 00:01:38,930 --> 00:01:46,560 inside this function as item so I'll delete random argy bargy over there and change it to item and then 25 00:01:46,560 --> 00:01:52,130 remember whenever we use a flat list we also have to define that key extractor function. 26 00:01:52,290 --> 00:01:56,770 So I'm going to also define key extractor. 27 00:01:56,940 --> 00:01:59,940 This is going to be a function that gets called with our item. 28 00:01:59,940 --> 00:02:03,130 Now remember in this case we don't have to use any d structuring here. 29 00:02:03,180 --> 00:02:05,910 We only have to use d structuring on render item. 30 00:02:05,970 --> 00:02:08,670 So in this case we just receive our string directly. 31 00:02:08,670 --> 00:02:13,350 And remember the requirements of a key just has to be unique inconsistent. 32 00:02:13,380 --> 00:02:15,720 So in this case the RG B string that we're generating. 33 00:02:15,780 --> 00:02:19,920 Well that's probably going to be unique and it's definitely going to be consistent across re renders 34 00:02:19,950 --> 00:02:20,910 as well. 35 00:02:20,910 --> 00:02:26,400 So from key extractor we'll just return item like so and that should pretty much be it. 36 00:02:26,490 --> 00:02:33,530 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 37 00:02:33,530 --> 00:02:39,530 tap on added color and I'll do it again and again and again and again and yep that's looking pretty 38 00:02:39,530 --> 00:02:40,390 good. 39 00:02:40,430 --> 00:02:46,640 So every time we tap this thing we are updating some piece of state that update is causing our entire 40 00:02:46,640 --> 00:02:48,530 component to re render itself. 41 00:02:48,530 --> 00:02:54,620 So the flatness component is going to get that new list of data and it's going to call render item for 42 00:02:54,710 --> 00:02:57,650 each additional string that we have inside that array. 43 00:02:57,680 --> 00:03:02,060 You'll notice that my list of colors is going off the screen now but remember flat list is going to 44 00:03:02,090 --> 00:03:07,460 automatically make them scalable so I can scroll on down and see all the different colors I have generated 45 00:03:07,920 --> 00:03:11,020 and I'll test this out really quickly on Android as well. 46 00:03:12,480 --> 00:03:17,740 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 47 00:03:17,740 --> 00:03:19,000 them as well. 48 00:03:19,000 --> 00:03:20,380 Perfect. 49 00:03:20,480 --> 00:03:20,710 All right. 50 00:03:20,720 --> 00:03:26,570 So hopefully this whole state system is making a little bit more sense now but well we might still need 51 00:03:26,570 --> 00:03:27,920 a little bit more practice. 52 00:03:27,920 --> 00:03:32,210 So let's try out one more little sample application around state in the next video as well.