🎬 React Movie Selector Activity

🎯 Objective

Students will create a simple React application where users can:

Select a movie genre from a dropdown menu.
See a list of movies based on the selected genre.
View a loading message while the app "fetches" movie data.
Display an error message if no genre is selected and the user tries to fetch data.

🛠️ Steps

1️⃣ Initial Setup

Create a new React app.
Create a component named MovieSelector.

2️⃣ Requirements

Use useState to manage the following state variables:

selectedGenre (string) – tracks the currently selected genre.
isLoading (boolean) – indicates if the app is "loading" movie data.
error (string) – stores any error messages.
movies (array) – holds the list of movies for the selected genre.

3️⃣ Functionality

✅ Create a dropdown menu to select a genre (e.g., Action, Comedy, Drama).
✅ Add a button labeled "Fetch Movies".
✅ When clicked:
- Show a loading spinner while "fetching" movie data.
- Display a list of movies after the data has been fetched.
- If no genre is selected, display an error message.

🔍 Activity Breakdown

🎞️ Genre Selection

The dropdown menu (<select>) should update the selectedGenre state.
Practice managing controlled components in React.

⚙️ Conditional Rendering

Loading State:
Display "Loading movies..." when isLoading is true.
Error State:
Show an error message if the user tries to fetch data without selecting a genre.
Movie List:
Display the movies list only after successful fetching.

🧠 State Management

Use the useState hook to manage:

selectedGenre
isLoading
error
movies