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.