Multiple tabs with buttons

Dash Python
1

Hi, I’m struggling to get multiple tabs with buttons. When switching between tabs it doesn’t remove the content from previous tab and throws the error in browser “SyntaxError: Unexpected end of JSON input: index.js:542”. Here is the code:

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

dash_app = dash.Dash(url_base_pathname= '/')

dash_app.layout = html.Div([
        html.H1('Parameters'),
        dcc.Tabs(id="tabs", children=[
            # Commodity
            dcc.Tab(id = 'tab-commodity',label='Commodity', children=[
                html.H3('Commodity asset class'),
                html.Div(id='table-commodity'),
                html.Button('Calculate', id='button-commodity', n_clicks=0)
            ]),
            # Credit Spread
            dcc.Tab(id = 'tab-credit',label='Credit Spread', children=[
                html.H3('Credit Spread asset class'),
                html.Div(id='table-credit'),
                html.Button('Calculate', id='button-credit', n_clicks=0)
            ])
        ])
    ])

    # Commodity
    @dash_app.callback(Output('table-commodity', 'children'),
                       [Input('button-commodity', 'n_clicks')])
    def update_table_commodity(n_clicks, val=None):
        return f'Commodity clicked {n_clicks} times.'

    # Credit Spread
    @dash_app.callback(Output('table-credit', 'children'),
                       [Input('button-credit', 'n_clicks')])
    def update_table_credit_spread(n_clicks, val=None):
        return f'Credit Spread clicked {n_clicks} times.'


if __name__ == '__main__':
    dash_app.run_server(debug=True)