Dropdown component - selected data not visible

[NadA]

Hi, I have an issue with the dropdown component. It works OK if I use {‘label’: ‘string’, ‘value’: ‘string’}, however, if I use {‘label’: ‘string’, ‘value’: [list]} the main dropdown box does not show any text. You can see an example in the image below. I am not sure why it isnt displaying it, as the text should be sampled from the label variable, which is a string

values as lists:

values as strings:

[Emmanuelle]

Hi @NadA, when you define the options attribute of a dcc.Dropdown, the value key can only have a string or a number as its
value, as explained in the docstring of dcc.Dropdown. Here nothing is displayed because this option is considered as not valid.

- options (dict; optional): An array of options {label: [string|number], value: [string|number]},
an optional disabled field can be used for each option. options has the following type: list of dicts containing keys 'label', 'value', 'disabled'.
Those keys have the following types:
  - label (string | number; required): The dropdown's label
  - value (string | number; required): The value of the dropdown. This value
corresponds to the items specified in the `value` property.
  - disabled (boolean; optional): If true, this option is disabled and cannot be selected.

[Emil]

The value can only be a string or a number, not an arbitrary object. Typical approaches for your use case are,

1. Serialize your object to a string, and deserialize it in the callback.
2. Store the objects somewhere (in memory, in a file, etc.) where they can be looked up via a key. Use the key as value in the drop down and lookup the object in the callback.

[NadA]

Thanks, I fixed the issue. I wanted to save pass a list as a value to filter a dataframe, but I converted the string afterwards