Skip to main content
Question

How to set text to a new value (case: dropdown menu)

  • October 17, 2024
  • 0 replies
  • 53 views

burns_hairnet0h

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?

This topic has been closed for comments

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings