Project Feature: Interactive Filtering

Requirement

Expand the DevDash project by adding a search bar to filter the "Recent Activity" feed in real-time.

Assignments (Start First)

1. State Setup: Open your DevDash project. In the parent component of the RecentActivity list, create a state variable for searchQuery.
2. The Search Input: Build a SearchBar component and place it right above the activity feed. Pass down the state setter so the input updates searchQuery.
3. Filtering the Data: Before mapping the activity data into your list, use .filter() to only keep activities where the action text includes the searchQuery (make sure to handle case-insensitivity using .toLowerCase()).
4. Handling Empty Results: If the user searches for something that doesn't exist, the filtered array will be empty. Display a friendly "No matching activity found" message instead of an empty space.

Lessons (Optional)

• Lifting State Up: If the search bar and the list are siblings, the state must live in their closest common parent so it can be passed down to both.

The Summary and Quizzes

1. Feature Review: Adding interactive search requires a solid grasp of State, Props (passing the setter), and Array Methods (filtering).