This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Filtering" Lesson
[00:00:00]
>> Brian Holt: So let's go back and change this to stop being a search term, and just say this is s video again, or whatever you called your brand. Save that, readdress that, readdress that. So now let's do the part that I think's really fun. So we have a map right here.
[00:00:21] There's another method in JavaScript on array is called filter. So if I put in a .filter statement, this is very similar to how map works. But instead of returns a new value, you just return true or false. If it returns true, you keep to the array. And if it returns false, it kicks it out of the array.
[00:00:42]
>> Brian Holt: So I have a show here as well.
>> Brian Holt: And what I'm going to do is, I'm going to return.
>> Brian Holt: So this a little clever. But I think it's on the borderlines of acceptable. So I'm gonna do show.title.
>> Brian Holt: Show.description
>> Brian Holt: So these are the two fields that we're going to search, right?
[00:01:17] So I'm gonna concatenate them together in one string. I'm going to put them toUpperCase. Because I wanna be case insensitive in my search. And then I'm going to say, indexOf. This.state.searchTerm.toUpperCase, cuz I want that to be case sensitive as well,
>> Brian Holt: Is greater than or equal to 0.
[00:01:58] So let's kind of unpack this, this is a little dense. Show.title, show.description. Right, these are the two fields that we're searching. So we're putting them together in one string. We're making that uppercase so that it's case insensitive. And we're saying indexOf it says if you find this string anywhere, give me the index of it.
[00:02:17] So if that's greater than or equal to 0. So that basically says if you find this string anywhere inside of this other string, then return true, right? So for returns true, it stays in the array and if it returns false. If it didn't find it anywhere on the array, it kicks it out of the array.
[00:02:39] So, I'll come back to this but let me show you what's actually happening.
>> Brian Holt: Yeah, whatever, I'll fix that later. Refresh.
>> Brian Holt: Okay, so I have a blank search, but as soon as I type house, right, only House of Cards and Fuller House have the words house in them.
[00:03:03] So that's the only ones that stay or if I put Kimmy, I only get Unbreakable Kimmy Schmidt, right? Cuz that's where Kimmy is and then Kimmy right there, also Fuller House.
>> Brian Holt: So this is just a really poor man's way of doing search, right?
>> Brian Holt: So this is a little clever but that's what's going on there.
[00:03:29] Any questions about that?
>> Speaker 2: They're wondering if this is how you do it at Netflix?
>> Brian Holt: No.
>> Speaker 2: [LAUGH]
>> Brian Holt: There's a whole team at Netflix that all they worry about is search. That's certainly not me.
>> Brian Holt: Unless you're doing client site only search, this is probably woefully even inadequate for that.
[00:03:54] But it's impressive enough for a demo, so.
>> Brian Holt: Questions?
>> Speaker 2: For something like the to do list, classic thing, it's beautiful for saying, just show me all the a priority items.
>> Brian Holt: Yep, exactly. So, using filter like this, totally fine. As long as this filter's fairly performant, otherwise, you probably need to [INAUDIBLE] it a little bit.
[00:04:21] This is obviously not a Perf workshop, so we're not gonna do that. But, using filter like this inside of. Inside of your map that's totally acceptable, that's a normal usual thing to do.
>> Brian Holt: Cool, you can even make this a little bit shorter... If you tak off the curly braces.
[00:04:56]
>> Brian Holt: Again, a little dense but that works too.
>> Brian Holt: Cuz remember, it's an implicit return. So, that'll return true or false. And then that true stays in, false gets kicked out.
>> Brian Holt: And, I also wanted to make this an empty string right here, searchTerm. Just make this an empty string.
[00:05:22] So that the initial value of the search is everything.
>> Brian Holt: Yeah, I think we'll be done around 5 today. If I go over testing, yeah, this should be good. Cool.
>> Brian Holt: So that's what I'm about to move on to is testing. Does anyone have any other questions before I move on?
[00:05:59]
>> Speaker 2: There's a question from Louis R. Could the filter map logic be moved out of render to improve the readability?
>> Brian Holt: I suppose that's at the call of the user. I think this is, like obviously filter's a little dense. I might take this particular part of the function, like this part.
[00:06:20] So maybe, filter out, right? And then this would be a separate function and one might consider doing that.
>> Speaker 2: They're really just array prototype function so you could put a function, a declared function in there.
>> Brian Holt: This is not specific to React, I think that's a good point to be made.