Form Solution: Adding a FlatList

[00:00:00]
>> So now we are gonna need to render lots and lots and lots of colors. So let's just go ahead and copy the giant colors array. And add it here. And because there's lots and lots of lots of things, we're going to use a FlatList. Let's go underneath Palette name and do FlatList.

[00:00:34]
So here our data is the COLORS. keyExtractor will be item => item.colorName. Then renderItem, going to get the item which is the individual color. And now we can pretty much just copy this, the switch code that we made earlier, And put it in here. So here the color name will now be item.colorName, And for the styles, do I have to change anything?

[00:01:35]
Cool, now we've got an array of all the colors. So next what we want to do, we can actually remove some of this padding now, some of this margin now, okay. So the next thing you wanna do is, obviously, these are all turned on by default. We want some way to actually track what's turned on and what's off.

[00:02:03]
So in order to do this, let's create a new state variable to hold this, so let's create one for selected colors only. So let's do SelectedColors and setSelectedColors, useState and let's start with an empty array. Now, we want this selectedColors array basically to contain, they each contain one of these.

[00:02:36]
So here, where we decide where something is selected. So this value is either true or false based on whether it's selected or not. So all we can do is we can do if selectedColors.find, so this is color, which is individual item. So color.colorName is the same as this item, colorName, and it's true.

[00:03:16]
And basically, what we want here is we want to force this into being a Boolean, and a handy way to do that is a double exclamation mark. So a single exclamation mark would make this the opposite of what it was before. So if it was true, it would be false.

[00:03:33]
If it was an object, it would be false. And then a double one will just basically converted into a Boolean and then convert it back. So you make it truthy. Cool, so now all of these are not selected, which is correct, cuz we don't have any items in our array.

[00:03:53]
And last thing we need to wire up is this onValue change. So let's create another callback. Let's call it handleValueChange, And here, we get two things. So we get the value, so whether the user turned this thing on or off. So value and also we get the whole color.

[00:04:36]
Nice, so here basically if value is true. So this means that the user has toggled the button on, we want to add the color into our selected colors array. So let's do setSelectedColors. And we do care what the current ones are. So we do colors. And we return all the colors, but with the current one added.

[00:05:13]
And in this case, we don't really, do we care? I guess I'm adding it to the end of the color list, I guess it doesn't matter too much. And then otherwise, if the value is false, we know that the user has toggled it to be off. And in this case, we are going to remove it from our current color array.

[00:05:36]
So we do setSelectedColors, And then we're just going to filter the color that they deselected out. Actually, I can't call this color. I've gotta call it selectedColor. And I'm going to do selectedColor.colorName. All right, so here it basically does colors.filter. And this filters out everything where the colorName is the selectedColorName.

[00:06:37]
In theory, well, okay, so the reason it doesn't work is we aren't actually calling this function, so we need to add it to onValueChange. So onValueChange will return selected, so this is the Boolean. And in this case, we do actually want to call this explicitly cuz we wanna pass in two things.

[00:06:58]
You wanna pass in selected, And also the color that we're currently working on. So this two arguments. There you go so, I think this might have to be a converse. Okay, yeah, so I had a small mistake here when I did a filter, I filtered everything out rather than this.

[00:07:28]
So if you followed along, make sure this is a negation. And now I can select all of these. Now, if you remember, we had another alert that we had to do. We had to check that there are at least three selected colors, so let's add another if else here.

[00:07:48]
else if, let's do selectedlColors.length, let's say, is less than 3. Then we do an alert saying, Please add at least 3 colors. So if I do have the name, I press net. Why does this still work?
>> I think it's misspelled.
>> Thank you, misspelled length. All right, so add a name and add no colors.

[00:08:43]
Okay, so it's saying please add at least three. Doesn't work with two, but if I add three-
>> You need selected colors in your array at the bottom.
>> Yes, yes, I do, thank you. This is because our handle submit hook is now being re-rendered. I told you this happens to me all the time [LAUGH].

[00:09:11]
All right, let's actually add some interesting colors here. Why did these not show up? I know why, because I've hard coded this colors array to be empty. So let's do selectedColors here. And I'm just gonna refresh. Yay, it works! That's pretty cool. And so there's loads and loads of things where you can enhance this.

[00:09:53]
You could make the Submit button nicer, you could add little color previews, yes?
>> I was just gonna say that's what I did. I had a blue square of color next to the drawing, so.
>> Nice.
>> None of them actually are.
>> Yep, perfect, yeah, so there's loads of little things that you can do.

[00:10:08]
You can enhance the net hook request, they actually do a post. If you wanted to, you could add the bottom navigation. The API actually has a search functionality. So if you search by ID, you can also preview a particular color, so there's loads of things if you want to tinker a bit.

[00:10:25]
Sorry, you had a question?
>> You mentioned in the beginning that React Native has flex out of the box. Does it also support grids?
>> No, I don't think so. I think it's flex only, yep.
>> So you cannot even wire that up?
>> I don't think so, sorry, yes?

[00:10:48]
>> What's the benefit of using use callback as opposed to just writing another anonymous function?
>> You could write an anonymous function. Yeah, especially so if you have, if you had a use callback and you put it outside of here, that will be completely fine to do. You just have to make sure to pass in all the arguments into the function.

[00:11:15]
So you can do either. I'm pretty sure I could just, yeah, so I could move this handleSubmit, for example, outside of the function. But then every time I call it, I would have to pass in the selected colors. And I would have to pass in the currently selected name as well.

[00:11:35]
So you could do it, but you need to make sure you pass in all the different arguments, cuz it will be a pure function.