How to get rid of component after returning new layout

Hello,

I have a dropdown menu and I need to change the layout with each value of it.
Here in this example the 2nd option of the dropdown is loading pseudo_app.layout.
The thing is that I want the dropdown to disappear once the layout has been loaded.
I could achieve it but I get an error and I don’t know how to solve it.

Thank you!

index.py:

import dash
from dash import dcc
from dash import html
from dash.dependencies import Input, Output

from app import app
from apps import pseudo_app

app = dash.Dash(__name__, suppress_callback_exceptions=True)

app.layout = html.Div([


    html.Div([ html.Div('')
    
         ],  id='container'),

    html.Div([
    dcc.Dropdown(
        id='dropdown',
        options=[

            {'label': 'page 1', 'value': '37'},
            {'label': 'page 2', 'value': '38'},
        ],
        value='0',
    ),
    ],id='dropdown_div', style= {'display': 'block'}),

    ])


@app.callback(

    Output('container', 'children'),
    Output('dropdown_div', 'style'),
    Input('dropdown', 'value')
)

def track_dropdown(value):

    if value == '38':
        return pseudo_app.layout, {'display': 'none'}


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

pseudo_app.py

import dash
from dash import dash_table
from dash import dcc
from dash import html
import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/solar.csv')

#from app import app

app = dash.Dash(__name__, suppress_callback_exceptions=True)

layout = html.Div([


    dash_table.DataTable(
    id='table',
    columns=[{"name": i, "id": i} for i in df.columns],
    data=df.to_dict('records'),

    )
])


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

error:

Callback error updating ..container.children...dropdown_div.style..

dash._grouping.SchemaTypeValidationError: Schema: [<Output `container.children`>, <Output `dropdown_div.style`>]
Path: ()
Expected type: (<class 'tuple'>, <class 'list'>)
Received value of type <class 'NoneType'>:
    None

Hello @tannin.rusk,

I think the error is throw due to missing else block in your callback function. Your callback only returns if the value == 38 and initially in your dropdown you have set :

as it doesn’t satisfy your if condition it returns None value to the children and style attributes.

Hello atharvakatre,

an else block removes the error, but when I use:

    else:
        return app.layout, {'display': 'block'}

I see two dropdown components.
Any ideas how to manage this?

Ok I found a way, I set display:None in the div tag, and display:block in the else block

@tannin.rusk

You see two dropdowns because in your else block you are passing the app.layout to the div which is already inside your app.layout .

If you want no changes to be made in your app.layout you can instead make use of dash.no_update

    else:
        return dash.no_update, {'display': 'block'}
1 Like

Good to know! Thank you!

1 Like