Complete Introduction to React (feat. Redux and React Router) Implementing the Search Filter

Transcript from the "Implementing the Search Filter" Lesson

[00:00:03]
>> [MUSIC]

[00:00:03]
>> Brian Holt: So let's actually make this do something now, and let's go to Search.jsx which is where we are. So we're gonna do a little bit more functional programming stuff. We did map already, right? So put this on a new line. And I'm gonna put something in the middle here.

[00:00:20] I'm gonna do a filter as well, .filter(show).
>> Brian Holt: So, we'll do it the clever way and I'll explain it along the way.
>> Brian Holt: So, the basic gist of what I wanna do here, is I want people to be able to dynamically search for the show that they're looking for.

[00:00:49]
>> Brian Holt: So the first thing is, if it shows up either in the title or in the description, I want to be able to search for it. So I'm gonna do show.description and show.title together in these backticks, right? Remember, this is a backtick.
>> Brian Holt: So, I'm gonna make this like mushed together strings, so I can look at both of them.

[00:01:13] Then I'm gonna do a toUpperCase, because I want it to be case insensitive.
>> Brian Holt: Then I'm gonna do indexOf, which basically is gonna ask, hey do you contain this string, where? And then I'm gonna ask if it's indexOf(this.state.searchTerm.toUpperCase) as well, right? Cuz I'm gonna look for both of them uppercase, and that way case becomes a non-issue.

[00:01:43]
>> Brian Holt: And then here, I'm gonna ask if that's greater than or equal to 0. If it doesn't find anything in this indexOf, it returns -1. If it finds anything in your string, then it's gonna return 0 to the end of the string, it gives you the index of where that string lies.

[00:02:03]
>> Brian Holt: It's a little clever. You can break this down a little bit more if that feels better to you, but it feels okay to me.
>> Brian Holt: And for those of you that don't know what filter is, I'll just give you the 30 second version. If I have [1, 2, 3, 4, 3, 2, 1] and I say, .filter (function(num) { return num === 2}).

[00:02:41] Basically that what this is gonna do is it's gonna apply, this needs both of them. It's going to run this function on every single item in the array, just like map does, right? If it returns true it keeps it in the array, and if it returns false it drops it from the array.

[00:03:01] So what this is going to return is,
>> Speaker 2: [COUGH]
>> Brian Holt: Bless you. 2,2, right, because num is only gonna equal 2 where it's equal to 2. So this is a totally worthless example, but this shows you exactly what filter's doing underneath the hood.
>> Brian Holt: So, what this is doing, it says, if I have the search term anywhere in my show title or my description, then keep it in the array, otherwise drop it from the array.

[00:03:37]
>> Brian Holt: Okay, so save that. Also, if you have more questions about functional programming, Brian Lonsdorf has an awesome Frontend Masters that you can check out. And also, I gave a intro to CS Frontend Masters, and at the very end of that course is also an intro to functional programming, like a 101, and we talk about filter.

[00:04:01] Okay so, save that. I have one ESLint error on line 25 over wrong indentation.
>> Brian Holt: Does it expect it to be one more?
>> Brian Holt: It does, okay. So get rid of that, refresh. The other thing is let's get rid of this business up here.
>> Brian Holt: Here, we don't want this to say svideo again.

[00:04:33]
>> Brian Holt: That's line 18. We just changed this h1 to, instead of reflecting the state cuz we're done debugging that, just make that say svideo again, we just want it to say the branding.
>> Brian Holt: Okay, so now refresh this. Another thing, get rid of this event, sorry, not that one.

[00:04:57] Make your searchTerm on your getInitialState just be blank.
>> Brian Holt: So line 8 right here, we just made that an empty string, right here. Cuz we don't want to be initially searching for anything, right? We want it to be showing everything initially.
>> Speaker 3: But we should initiate it still, nonetheless, even if it's empty?

[00:05:17]
>> Brian Holt: Yeah, definitely. Otherwise it's undefined and we actually want it to be an empty string, not undefined. Good question.
>> Brian Holt: Okay, so now we have all of our shows. But what happens if we start searching for House, right? Now it's only showing House of Cards and Fuller House.

[00:05:41]
>> Brian Holt: Or Marco, right? So now we've made this dynamic searching ability.
>> Brian Holt: Right? I think that's pretty compelling, right? I think it's pretty cool, personally.
>> Brian Holt: That it didn't take a terrible amount of effort to make this dynamic search ability work. And that's one, thanks to functional programming, and two, thanks to the ability to use functional programming with React.