2. Enhancing Functional Components with React Hooks

Objective: This assignment aims to deepen your skills in using React Hooks for state management, props handling, conditional rendering, and list operations in functional components. You'll be building a dynamic component that responds to user interactions.

Problem Statement: You are tasked with developing an interactive 'Favorite Movies' list component in React. This component should allow users to add movies to a list, remove them, and toggle between different views. The list of movies will be hardcoded for simplicity. Your challenge is to implement this functionality using functional components and React Hooks.

Task 1: Initializing and Displaying a List

Start by creating a MoviesList functional component.
Initialize a state with a hardcoded list of movie titles using the useState hook.

Expected Outcome:

The component should render an unordered list (<ul>) of movie titles.

Task 2: Conditional Rendering of Movie Details

For each movie, implement a feature that toggles additional details (like a brief description) when the movie title is clicked.
Use conditional rendering to show or hide these details.

Expected Outcome:

Clicking on a movie title toggles the display of its details (or you have a show details button)
Each movie should maintain its own toggle state.

Task 3: Implementing Movie Removal

Add a 'Remove' button next to each movie title.
Implement a function to remove a movie from the list when this button is clicked.

Expected Outcome:

Clicking the 'Remove' button should instantly remove the movie from the list.

Task 4: Toggling List View (BONUS)

Implement a button outside the list to toggle between showing all movies and only showing a specific genre (e.g., 'Action').
Use conditional rendering and state management to control the list's display based on this toggle.

Expected Outcome:

The toggle button should switch the view between all movies and movies of a specified genre.
The state should correctly reflect the current view.

Code Structure Guidance:

Lesson 2: Assignments | React State and Props