How do I create multiple dropdown options?

Dash Python
1

I want to do a dropdown of dash_core_components with multiple options like in NYC example, whose source code is here:

import dash_daq as daq
import plotly.graph_objects as go
import dash_core_components as dcc
import dash_html_components as html
import datetime as dt
import dash_table

from . import utils
from .server import app, server

# Multi-dropdown options
from .controls import TOPICS

topics_options = [{'label': key, 'value': TOPICS[key]} for key in TOPICS]

def article_search():
    return html.Div(
        [
            # Value we search in the text
            html.Div(
                dcc.Input(id='input-box', type='text', value = 'Bank'),
                html.P(
                    'Filter by well status:',
                    className="control_label"
                ),
                dcc.Dropdown(
                    id='TOPICS',
                    options=topics_options,
                    multi=True,
                    value=list(TOPICS.keys()),
                    className="dcc_control"
                )
            )
        ] 
   )

app.layout = html.Div(
    [
        dcc.Tabs(
            [
                dcc.Tab(
                    label='Search article',
                    value='search',
                    children=article_search()
                )
            ]
        )
    ]
)

But with the following TOPICS dictionary

{'/Finance': '/Finance', '/Business & Industrial': '/Business & Industrial', '/News/Politics': '/News/Politics', '/Law & Government/Government/Courts & Judiciary': '/Law & Government/Government/Courts & Judiciary'}

I want to maketopics_options for the Dropdown:

# create controls 
topics_options = [{'label': str(TOPICS[topics]),
                        'value': str(topics)}
                       for topics in TOPICS]

But I get:

Traceback (most recent call last):
  File "run.py", line 1, in <module>
    from dashboard.app import app
  File "C:\Users\antoi\Documents\Programming\richmond2\dashboard\app.py", line 337, in <module>
    children=article_search()
  File "C:\Users\antoi\Documents\Programming\richmond2\dashboard\app.py", line 252, in article_search
    className="dcc_control"
  File "C:\ProgramData\Anaconda3\lib\site-packages\dash\development\base_component.py", line 332, in wrapper
    return func(*args, **kwargs)
  File "C:\ProgramData\Anaconda3\lib\site-packages\dash_html_components\Div.py", line 63, in __init__
    super(Div, self).__init__(children=children, **args)
  File "C:\ProgramData\Anaconda3\lib\site-packages\dash\development\base_component.py", line 102, in __init__
    "Prop {} has value {}\n".format(k, repr(v))
TypeError: Component detected as a prop other than `children`
Did you forget to wrap multiple `children` in an array?
Prop n_clicks has value Dropdown(id='TOPICS', options=[{'label': '/Finance', 'value': '/Finance'}, {'label': '/Business & Industrial', 'value': '/Business & Industrial'}, {'label': '/News/Politics', 'value': '/News/Politics'}, {'label': '/Law & Government/Government/Courts & Judiciary', 'value': '/Law & Government/Government/Courts & Judiciary'}, {'label': '/Law & Government/Legal', 'value': '/Law & Government/Legal'}, ...
2

@MikeP
Try to print out:

for topics in TOPICS:
    Print(str(TOPICS[topics]))

See what that prints out. That night be the problem.

3

@adamschroeder
Thanks for the comment
It returns:

/Finance
/Business & Industrial
...
4

This should be what you are after:

[{'label': key, 'value': TOPICS[key]} for key in TOPICS]
5

@flyingcujo If it gives the right dictionary I still have

TypeError: Component detected as a prop other than `children`
Did you forget to wrap multiple `children` in an array?
Prop n_clicks has value Dropdown(id='TOPICS', optio ...
6

ok…are you able to provide fully-functional sample code that illustrates your problem? It’s hard to provide futher guidance with what you have posted. FWIW, I won’t be able to run your code until this evening when I am in front of my computer - but others in the forum may be able to provide guidance as well.

7

Looks like

html.Div(
    dcc.Input(id='input-box', type='text', value = 'Bank'),
    html.P(
        'Filter by well status:',
        className="control_label"
    ),
    dcc.Dropdown(
        id='TOPICS',
        options=topics_options,
        multi=True,
        value=list(TOPICS.keys()),
        className="dcc_control"
     )
)

is missing [ ] around the children of the html.Div …should be

html.Div([
    dcc.Input(id='input-box', type='text', value = 'Bank'),
    html.P(
        'Filter by well status:',
        className="control_label"
    ),
    dcc.Dropdown(
        id='TOPICS',
        options=topics_options,
        multi=True,
        value=list(TOPICS.keys()),
        className="dcc_control"
     )
])