Black Lives Matter. Please consider donating to Black Girls Code today.

Tabs component - weird error

Hello all,

I have started using Dash for a dynamic modelling application. I was successful in producing a really nice functionality so far, but it has grown bigger and I need dynamic tabs.

Among many of the online queries this one seems the most relevant: dcc.Tabs: Filling tabs with dynamic content. How to organize the callbacks?.

I tried the same approach using reproducible Hello World example, and I get the error :"TypeError: Unexpected keyword argument ‘tabs’.

Here is the code:

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import dash_table_experiments as dt

import flask
import pandas as pd
import time
import os

server = flask.Flask('app')
server.secret_key = os.environ.get('secret_key', 'secret')

df = pd.read_csv('')

app = dash.Dash('app', server=server)
app.config['suppress_callback_exceptions'] = True
app.scripts.config.serve_locally = False
dcc._js_dist[0]['external_url'] = ''

app.layout = html.Div([
                 options=[{'label': 'Option 1', 'value': 1},
                          {'label': 'Option 2', 'value': 2}],
        dcc.Tabs(tabs=[{'label': 'Tab 1', 'value': 1},
                       {'label': 'Tab 2', 'value': 2}],

@app.callback(Output('tab-output', 'children'), [Input('tabs', 'value')])
def display_content(value):
    if value == 1:
        return  html.Div([
    html.H1('Stock Tickers'),
            {'label': 'Tesla', 'value': 'TSLA'},
            {'label': 'Apple', 'value': 'AAPL'},
            {'label': 'Coke', 'value': 'COKE'}
], className="container")
    elif value == 2:
        return html.Div([dt.DataTable(id='table')]) #etc. etc.

@app.callback(Output('my-graph', 'figure'),
              [Input('my-dropdown', 'value')])
def update_graph(selected_dropdown_value):
    dff = df[df['Stock'] == selected_dropdown_value]
    return {
        'data': [{
            'x': dff.Date,
            'y': dff.Close,
            'line': {
                'width': 3,
                'shape': 'spline'
        'layout': {
            'margin': {
                'l': 30,
                'r': 20,
                'b': 30,
                't': 20

if __name__ == '__main__':

If anybody can help, I would be very grateful - I cannot continue my project without solving this.


I think your error is here:

I would rewrite the following:

   id='tabs', value=1, children=[
      dcc.Tab(label='Label1', value=1),
      dcc.Tab(label='Label2', value=2)

That is; I have my separate dcc.Tab components in a children list, you have a dictionary within a list. Hope it helps. :slightly_smiling_face:

PS: For future reference, if you put 3x ` in the beginning and end of your code entry, it will format your text as code for easier readability.:man_technologist:

1 Like

Thanks a lot Blaceus - this solved it!!!

I am now trying to exchange data between tabs, but I guess I am going to struggle a bit with json :slight_smile:


You’re welcome. :smile:
I know that there have been some development of a Storage component in Dash, such that users can share data between states. I believe it can help you on the way. See:

Personally, I have implemented storing data in a hidden Div, but that was before this storage component was released. I would think that is the correct way to implement such shennanigans today.

If you have not yet found it, the hidden Div method is described in the documentation as well. :slightly_smiling_face:

Sorry for a bit of delay - was busy and was waiting for the weekend to go back to learning Dash :slight_smile:

Thanks for the advice. I was only successful in implementing Storage to an extent. Weirdly it updates normal div’s but not the dropdown lists. If you are interested in particularities, I opened a new thread: Dropdown list not updating ( while normal .div is updating)


1 Like