Filtering and Searching Lists

Requirement

Learn how to use .filter() alongside .map() to create a search bar that updates a list in real-time.

Assignments (Start First)

1. Simple beginner UI task: Create a UserDirectory. Render an array of names. Add a hardcoded variable const filterText = "a" and use .filter() to only show names containing "a".
2. Slightly improved version: Change filterText to be a state variable managed by an <input> field. Now the list should filter live as you type.
3. Practical real-world component: Build a ProductCatalog. Include a dropdown to filter products by category (e.g., "Electronics", "Clothing"). Use state to track the selected category and filter the mapped products accordingly.
4. "The Escalation": Combine search text and category filtering. Create a RecipeList where users can type a search term AND select a difficulty level (e.g., "Easy"). Filter the array using both conditions before mapping it.

Lessons (Optional)

• The .filter() Method: Another standard array method. It returns a new array containing only the items that pass a specific condition.
• Chaining: You can chain .filter().map() together cleanly inside your JSX.

The Summary and Quizzes

1. Concept explanation: Filtering allows users to find what they need in large datasets. It's a powerful combination of State (what the user is searching for) and Lists (the data).
2. Why it works in React: Every time the search state changes, React re-runs your component. The .filter() creates a new subset of your array, and .map() renders exactly that subset.
3. Challenge question: If you have an array of numbers, how do you use .filter() to return only the numbers greater than 10?