Filter a JavaScript array with JSX and the `Array.filter()` method
In this lesson, we use application state to filter a list of names from a JavaScript array. When users type a search string in the Search component, the NamePicker component re-renders with the updated list of names matching the search.
Simon Vrachliotis: [0:00] Now that we have our search value passed to the NamePicker component, let's filter through the names array with the array .filter method. I'll define the filteredNames variable, and in there we'll take names, call .filter on it, and for each entry we'll check if the entry.name.includes(searchValue). This will filter out all the names that were no match.
[0:23] Now, I can replace names down here with our filteredNames array. Let's give it a try. It works! But, as you can see, if I search for logan with a lowercase l, it won't match the string. It's expecting an exact match. This is probably not the way we want the search to work.
[0:42] To mitigate this, we can normalize the strings to lowercase on both sides. Now, search with both uppercase or lowercase will match. Nice.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!