Dcc.tabs components value property can't be assigned list or dict value type with multi elements

Dash Python
1

code:
app.layout = html.Div([
html.H1(‘Dash Tabs component demo’),
dcc.Tabs(id=‘tabs’, value=[1, 2], children=[
dcc.tab(label=l, value=v)
for l, v in zip([‘tab one’, ‘tab two’], [[1, 2], [3, 4]])
]),
html.Div(id=‘tabs-content’)
])

the code above will raise an exception with ‘error loading dependencies’ or ‘error loading layout’,
but the previous version which i couldn’t remenber can make this trick,
does anyone can help me out of this, thanks a lot.

2

You can format the code using code] and [/code] with another bracket in the front.

app.layout = html.Div([
   html.H1(‘Dash Tabs component demo’),
   dcc.Tabs(
      id='tabs', # You might have used wrong '', but not sure
      value=[1, 2],
      children=[
         dcc.tab(label=l, value=v) for l, v in zip([‘tab one’, ‘tab two’], [[1, 2], [3, 4]]) # It has to be dcc.Tab not dcc.tab!!
      ]
   ),
   html.Div(id=‘tabs-content’) # Do you still need this with the way the new Tabs component works?
])
3

dear klnrdknt, thanks for your mindful dubuging, very kindly manner!
i’m hopefully wait for your new comment.

4

So it works now? :slight_smile:

5

Not yet.The documentation says the value property of dcc.Tabs and Tab should be string type, so I think this is the limitation.
Now I’m trying to union the params as a single string (such as ‘12’ and ‘34’) and then tranform it to a list type with list() or split() method while needed.
do you have any good idea? I just think this way is a little complicated.

7

Why not just use normal values? E.g. one way would be too

# First set up your layout like this
app.layout = html.Div(
    children=[
        dcc.Tabs(
            id='tabs',
            children=[
                dcc.Tab(
                    label='Tab {}'.format(i),
                    value=i,
                ) for i in range(1,3)
            ]
        )
    ]
)
someList = [[1, 2], [3, 4]]
# Later just use the value you get from a callback
@app.callback(
    Output('some_id', 'children'),
    [Input('tabs', 'value')]
)
def someFunc(tabValue):
    return someList[tabValue-1]
8

Aha! problem get done! this’s a really good choice, thank you very much, Klnrdknt.:rofl: