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