Updating Filters

[00:00:00]
>> Kevin Powell: So instead of having this here, we're gonna keep that there for a minute, we'll delete this one cuz we don't need it. Get rid of the console.log, and what we'll do instead is, let's create a function. So we're gonna say function, and we'll call it updateFilter, and we'll have the (e) right there, cuz we want that effect to go through, here I was using the arrow function.

[00:00:21]
If I'm creating a new function somewhere else that's not just being used in a callback there, I find just giving it a name and declaring it this way is a lot easier. I don't know, it's just the way I work. So we're gonna put that there and then have our const filterType = e.target., actually target.

[00:00:45]
We don't have a target, all right, let's see what we have actually e.target. And let's do a console.log(e.target) to see if there's something we can use or if we need to make a change. So we have the updateFilter, what I'm gonna do here, is every time that we change here, instead of having this whole function here, what we can do.

[00:01:05]
I mean, we can do this for both of them now, is we can just do our updateFilter as a callback. And now, I can copy that and paste that and do the seasonalFilter, and I can also do this for my editableFilter. So we add the event listener to both of them, but both of them are gonna use the same filter to be able to change.

[00:01:25]
So if I go to my Spring, we can get the id there, if I change this one, you can see my id is coming right there with that one. And if we go through edible spring, summer cuz I didn't change. So we're getting the season, coming up there.

[00:01:41]
One thing I didn't give these selects was a name, and I was planning on giving them names. So I'm gonna go and do that now, we could actually grab the id as well, that would work but it's easy to come in here and give this a name="season" as well.

[00:01:57]
And I'm gonna come on the select and give this a name is equal to edible, like that. And the advantage of having the name on there is it's just really easy to get to cuz we can .name and then season and my edible. So that's the one that's coming through and either the filterType here is either my season or my edible or getting the one that we wanna be using in either one of those different situations.

[00:02:29]
And now we can just be a little bit more creative or not creative but a little smarter in how we're doing things. So instead of console logging that, we wanna be able to change the current filter based on this filterType that we have. Do we have the seasonFilter or do we have the edibleFilter?

[00:02:47]
So for this we're gonna do our currentFilters and we have to do things a little bit different. Up until now I've always been using the dot notation so that would be like the season that I did before. The dot notation won't work in this situation because of how I'm using it.

[00:03:02]
The dot notation would work with the exact word of season or the exact word of edible, but I don't have that exact word. I have a variable of filterType instead. So because I'm using a variable, it just means instead of the dot notation, we do have to use the brackets like this instead.

[00:03:19]
So filterType right there is equal to the e.target value. So, remember the value is the filterType, so we're getting here, this should be .name, I took it off for some reason. The name is either season or edible, and then the value that we're getting from that is the actual value of what we've selected.

[00:03:46]
So we're gonna update the currentFilters[filterType], so that's either we're updating either the season or the edible, and we're gonna update it to the value that's being used there. So if we save that, and we'll do a console.log, so we can see it in action. Of our currentFilters, when I come here and I change it to Spring, spring and all, if I come here and I do Edible, we're getting spring and the edible.

[00:04:10]
Edible I change it to Toxic, we can see we're getting the toxic coming in right there. So it keeps track of both of them, and we're using one function to be able to update both of them there.