Building a Movie Filter Toggle in React: A Beginner's Guide

Previously in this course, we explored Filtering the Movie List: Real-Time Search in React to manage text-based input. In this lesson, we’re leveling up our user interaction by adding a boolean toggle to filter our movie list.

When building complex UIs, you often need to let users switch between different "views" of data. Whether it's showing only "Available" items or filtering by a specific category, the pattern remains the same: use a checkbox or radio input to manage a boolean state, then use that state to derive what gets rendered on the screen.

Understanding the Toggle Pattern

A toggle is essentially a controlled input. Just like we learned in Building an Interactive Search Bar: Controlled Inputs in React, React needs to be the "source of truth" for the input's value.

For a checkbox, the "value" is its checked status—a boolean true or false. When the user clicks the checkbox, we update the state, which triggers a re-render. During that render, we filter the movie array based on the current state value.

Implementing the Filter Toggle

Let’s add a "Show Only Action Movies" toggle to our movie browser. We’ll assume you’ve already set up your Dynamic Movie Cards: Building Reusable React Components.

JSX
import { useState } from CE9178">'react';

function MovieFilter({ movies }) {
  const [showOnlyAction, setShowOnlyAction] = useState(false);

  // 1. Derive the filtered list
  const filteredMovies = showOnlyAction 
    ? movies.filter(movie => movie.genre === CE9178">'Action') 
    : movies;

  return (
    <div>
      <label>
        <input 
          type="checkbox" 
          checked={showOnlyAction} 
          onChange={(e) => setShowOnlyAction(e.target.checked)} 
        />
        Show only Action movies
      </label>

      <div className="movie-list">
        {filteredMovies.map(movie => (
          <MovieCard key={movie.id} movie={movie} />
        ))}
      </div>
    </div>
  );
}

Breaking Down the Logic

1. State Initialization: We use useState(false) because the default view should show all movies.
2. The Derived List: Notice we don't store filteredMovies in state. We compute it during the render. This is a critical React pattern: if you can calculate data from existing props or state, don't create a new state variable for it.
3. Controlled Input: The checked attribute forces the input to reflect our state, and onChange ensures our state stays in sync with the user's interaction.

Hands-On Exercise

Your task is to extend the component above to support a second filter. Add a checkbox that filters the list to show only movies with a rating of 8.0 or higher.

Steps:

1. Add a new state variable: const [showTopRated, setShowTopRated] = useState(false);.
2. Update your filteredMovies logic to chain the filters:

   JAVASCRIPT
   let displayedMovies = movies;
   if (showOnlyAction) displayedMovies = displayedMovies.filter(...);
   if (showTopRated) displayedMovies = displayedMovies.filter(m => m.rating >= 8.0);
   

3. Add a second <label> and <input> to your JSX.

Common Pitfalls

• Mutating State Directly: Never do showOnlyAction = true. Always use the setter function (setShowOnlyAction(true)) provided by useState.
• Over-complicating Derived State: Beginners often try to keep filteredMovies in state and update it inside the onChange handler. This creates a "syncing" nightmare. Always derive your filtered lists during the render cycle to keep your app predictable.
• Ignoring Label Accessibility: Always wrap your checkbox in a <label> tag. It makes the text clickable, which is a massive improvement for user interaction and accessibility.

Recap

We’ve successfully implemented a toggle filter by treating the checkbox as a controlled input. By managing a simple boolean state and deriving our view from that state, we keep our component logic clean and declarative. This pattern is the foundation for almost every interactive filter you will build in React.

Up next: We'll dive into the world of side effects and learn how to manage data outside the component lifecycle using useEffect.