How to get rid of component after returning new layout


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!

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'),


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



    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__':

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

df = pd.read_csv('')

#from app import app

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

layout = html.Div([

    columns=[{"name": i, "id": i} for i in df.columns],


if __name__ == '__main__':


Callback error updating

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

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:

        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


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

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

Good to know! Thank you!

1 Like