Overview
CategoryFilter is a controlled select dropdown component that allows users to filter movies by genre. It displays a list of available categories and handles category selection.
Import
import CategoryFilter from '../components/CategoryFilter';
Props
Array of unique category/genre names to display as options in the dropdown
Currently selected category value (empty string means “all categories”)
Callback function invoked when a category is selectedSignature: (category: string) => voidParameters:
category (string): The selected category value (empty string for “all”)
Component Signature
const CategoryFilter = ({ categories, selectedCategory, onCategoryChange }) => { ... }
Features
Controlled Select
Follows React’s controlled component pattern:
<select
className="category-filter__select"
value={selectedCategory}
onChange={(e) => onCategoryChange(e.target.value)}
>
<option value="">Todas las categorías</option>
{categories.map(category => (
<option key={category} value={category}>
{category}
</option>
))}
</select>
Default “All Categories” Option
Always includes a default option with an empty value to show all movies:
<option value="">Todas las categorías</option>
Dynamic Category Options
Maps over the categories array to generate option elements:
{categories.map(category => (
<option key={category} value={category}>
{category}
</option>
))}
Usage Example
import React from 'react';
import CategoryFilter from '../components/CategoryFilter';
import usePeliculaSearch from '../hooks/usePeliculaSearch';
const PeliculasPage = () => {
const {
categories,
selectedCategory,
setSelectedCategory
} = usePeliculaSearch();
return (
<div>
<CategoryFilter
categories={categories}
selectedCategory={selectedCategory}
onCategoryChange={setSelectedCategory}
/>
</div>
);
};
import React, { useState } from 'react';
import CategoryFilter from '../components/CategoryFilter';
const StaticFilter = () => {
const [selected, setSelected] = useState('');
const genres = ['Acción', 'Drama', 'Ciencia Ficción', 'Crimen'];
return (
<CategoryFilter
categories={genres}
selectedCategory={selected}
onCategoryChange={setSelected}
/>
);
};
Category Data Source
When used with usePeliculaSearch, categories are automatically extracted from the movie data:
// From usePeliculaSearch hook
const categories = [...new Set(mockPeliculas.map((pelicula) => pelicula.genre))];
Rendered Structure
<div className="category-filter">
<select className="category-filter__select" value={selectedCategory}>
<option value="">Todas las categorías</option>
<option value="Acción">Acción</option>
<option value="Drama">Drama</option>
<option value="Ciencia Ficción">Ciencia Ficción</option>
<!-- More options dynamically generated -->
</select>
</div>
CSS Classes
.category-filter - Container div.category-filter__select - Select dropdown element
Behavior
- User selects a category from the dropdown
onChange event firesonCategoryChange callback is invoked with the selected value- Parent component updates state
- Filtering logic (in
usePeliculaSearch) re-runs
- Filtered results are displayed
Accessibility
- Uses semantic
<select> element
- Keyboard navigable by default
- Each option has a unique
key prop
- Clear default option text
Source Location
src/components/CategoryFilter.jsx:3