Give Multiple Dropdowns Their Own Individual State with elm-ui-dropdown

Flavio Corpa
InstructorFlavio Corpa

Share this video with your friends

Send Tweet

Since every time we interact with one of the dropdowns the information is shared between the 4 of them, the time as now arrives to give each individual dropdown its own state. We will also add subscriptions to listen to when the user clicks outside each dropdown!

To do this, we'll need to extend our state model to include each instance of our viewCard. To determine which dropdown that was clicked we will create a getDropdownState function that pattern matches the correct card instance. During this process, you'll see how the Elm compiler guides us through adding this functionality with detailed error messages.

You'll see how adding a subscription to close open dropdowns is convenient as Dropdown gives us an onOutsideClick function that receives the model and dropdown message.