Advanced State Management in React (feat. Redux and MobX) Jetsetter Solution: Implimenting Filter

Transcript from the "Jetsetter Solution: Implimenting Filter" Lesson

[00:00:02]
>> Steve Kinney: Let's actually just do filter real quick just to see it in there. Cuz I think we can get it done and we'll feel good that we have the entire app done. I think that it will make us feel really great, so we have the filter, we have items.

[00:00:17] So items is gonna have the search term cuz it needs to go through the items. It's going to be given to filter. So, we have this updated search term which at this point is already getting past. But we need to keep a search term in state, so, we'll say search term and we'll start out as an empty string.

[00:00:37] Because that will actually allow all of them through because it turns out that every string has an empty string in it. So we'll keep that searchTerm in there. And what we'll do is, when updateSearchTerm happens, we'll take the searchTerm,
>> Steve Kinney: this.setState,
>> Steve Kinney: With the searchTerm. If you haven't seen this syntax before, this is just ES6 object shorthand.

[00:01:05] Which is basically is the same thing as doing, hey take the searchTerm argument. And set it to the key of the searchTerm object except you type less. That seems to be the major theme of [INAUDIBLE] that theoretically you never type function ever again. And you're able to do some stuff a little bit shorter and cleaner which is really great if you have a very large font.

[00:01:24] Cuz your coding with a hundred of your best friends. So have it update the search term and we have that search term in state. We just need to pass it down so we'll say this.state.searchTerm. I could also put it. I could deconstruct it here. That is the only place I'm using it so I'm still going to leave it here and let's try it out

[00:01:50]
>> Steve Kinney: If/ I can update it, but it doesn't seem to be doing the thing. Let's open this up. It's great when you go for a live coding bonus, and it doesn't work immediately. That's always really rewarding. Cool, so let's take a look at-
>> Speaker 2: [INAUDIBLE] return method if you scroll down.

[00:02:11]
>> Steve Kinney: What?
>> Speaker 2: In items, you need to filter [INAUDIBLE].
>> Steve Kinney: I'm filtering all the items right here. Cuz we gotta find the state.
>> Steve Kinney: this.state.searchTerm, to lowercase. At this point I would probably pull this out into a variable so I don't have to type it in both places.

[00:02:34] But let's verify that everything works. Yay, everything works. We've implemented filter. We've implemented the ability to add a new one. We've implemented the ability to mark them as packed or unpacked. To remove them, to make them all as packed, right? But we had to pass stuff down a lot, right?

[00:02:49] It would be great if we had some ways to avoid this, right? To be able to say, hey, I have a set of things I would like to encapsulate this component. And that's what we'll look at in the next section.