#100DaysOfWeb in Python Transcripts
Chapter: Days 41-44: React: JavaScript user interfaces
Lecture: Filter tips while typing in a search field

Login or purchase this course to watch this video and the rest of the course contents.
0:00 In this video, we're going to look at filtering tips
0:03 by typing into the input field.
0:13 We already defined stubs for onFilterChange
0:18 and we edited to the on change event listener
0:21 inbounded in the constructor
0:24 and we have a helper to actually filter the tips
0:28 and filter change kits in the event
0:31 and sometimes that event can be empty
0:34 so let's handle that first.
0:36 So we're going to set a const filterStr
0:40 again const, because it's not meant to change
0:44 and if event has target value
0:50 I'm using a ternary here.
0:55 I'm going to get the value to lower case
1:00 to make it easier to match the tips
1:04 if event target value is null or undefined
1:07 or if anything falsy, I just set it to an empty string.
1:12 Again, to manipulate state
1:14 we need to use the setState method
1:17 passing it in an object.
1:21 The filter string, of course, changes
1:24 and it's one types
1:25 so I'm going to pass that through
1:29 as well as an update to the showTips array.
1:33 And we're going to use the helper, filter tips
1:36 to return a new array of tip objects.
1:41 I'm going to parse in the filter string
1:45 and that's it for the onFilterChange event listener.
1:50 Now the filter tips is a bit more involved
1:51 because we have to loop over the tips and match them both
1:56 on the tip text as well as the tip code.
1:59 So let's make a new tip array
2:02 then we're going to return.
2:09 And to match all the tips, we look over origTips array.
2:16 And we're going to use the newer notation
2:19 or const tip, which is a local variable of this state
2:24 for tips, and here we're going to do
2:27 some conditional matching of the tip
2:31 and if it matches, we're going to push it
2:34 onto the new array.
2:42 And a conditional is a bit involved
2:43 because tip turned out to be false sometimes
2:46 so we have to make sure that it actually has a value
2:50 so that we can call to a lower case on it
2:54 and we can use the newer includes
3:00 give it filter string.
3:01 So I type, for example, itertools.
3:03 If itertools is in the tip text, this returns true.
3:08 But we also want to match the actual code
3:11 so I'm going to do an or
3:14 and to the same conditional for the code attribute.
3:21 So first of all, it needs to be true
3:24 because otherwise to lower case
3:26 it'll be called on non- only to a crash.
3:31 But the rest is the same.
3:32 I'm going to look if the string that the user types
3:36 in input field is included in the tips code.
3:40 If either of those is true, I push the tip
3:43 on the newly-created tips list or tips array
3:48 and that tips array gets returned
3:51 recalling the helper
3:53 in the setState method.
3:59 Let's see if this works.
4:03 Cool. Now I type itertools.
4:06 And we get all the tips that contain itertools.
4:10 And type numbers and I get everything with numbers
4:14 arg parse, Guido, you name it.
4:20 However, there's one final thing I want to do.
4:23 If I type this, I still have to kind of do an effort
4:26 to see in the tips where the match was.
4:29 So in the final video of this lesson
4:31 I'm going to use the React highlight work plugin
4:35 to make the matching of the work more visually appealing.