CodingNic

Build the Wishlist

Make the Heart Controls Share One Wishlist

Build the Wishlist 4 min read

Make the Heart Controls Share One Wishlist

Make the Heart Controls Share One Wishlist

The heart icon already appears on movie cards, and the detail page now has an Add to wishlist control, but those controls do not share any state. In this module you will build that shared state and connect both entry points to it.

The first step is a small React context that owns the list of movie ids and exposes exactly the operations the UI needs: ask whether a movie is saved and toggle it. Keeping the state in one provider means the browse page, movie details, and future wishlist page all see the same list.

You will then mount the provider at the application level and turn the two existing controls into consumers. At this stage the wishlist is intentionally in memory only. Persistence comes later, which lets you understand the state flow before adding the browser storage lifecycle.

By the end of this module, clicking a heart on a card and clicking the detail-page wishlist button will update one shared list immediately. The next module will make that list survive a refresh and populate the wishlist page.