I am working on a dropdown component that updates the ‘select option’ text with the option text that receives the click. So, if the user selects ‘apple’ from the list, the dropdown would show ‘apple’ as the selected option. One approach would be to use variables inside the component. To continue with our example, we would store ‘apple’ as a variable and wire it up to one of the options in the dropdown list. The ‘select option’ would be set to ‘apple’ when the user selects it. The problem with this approach is that a variable can only be defined once. As a result, multiple instances will all refer to the same value.

For example, if I want to use two dropdown components, one with a list of fruits and another with a list of car brands, this is not possible.

An alternative approach is to link the variables to the option texts at the instance level instead of the component level. This way, each dropdown would have its own set of variables. However, when setting up these events, you would need to modify the variant of the dropdown component. For example, to configure an event, you’d first need to open the dropdown (a different variant), set the event for updating the variable, and then revert it back to the closed state. The issue is that when the state changes, the events aren’t retained. What would be a better approach here?