How to fix: The children property of a component is a list of lists, instead of just a list with Plotly-dash in Python

Question

I am trying to build a simple web dashboard with plotly and dash. Here is the structure I am trying to get:

app = dash.Dash(__name__)

def Build_home_page():
    """
    build_welcome_banner [summary]

    [extended_summary]

    Returns
    -------
    [type]
        [description]
    """    ""
    
    return [
        html.Div(
            id="banner",
            className="box",
            children=[
                html.Div(
                    id="welcome-user",
                    children=[
                        html.H1("WELCOME TO THE DATA SCIENCE"),
                        html.H1("AND MACHINE LEARNING PLATFORM"),
                        html.Hr(className="tickline"),
                        html.Br(),
                        html.P(id="welcome-text1",
                               children= [
                                   "That provides you with the tools that allow you to explore your data seemlessly and"
                                   ]),
                        html.P(id= "welcome-text2",
                               children= [
                                   "get actionable insights from your data and allows you to easily apply Machine learning models to make predictions with your data"
                                   ]),
                                ],
                        ),
                    ],
        ), 
        
        html.Div(
            id= "features",
            className= "features-box-model",
            children=[
                html.Div(
                    id= "feature-text",
                    children= [
                        html.Div("Features"),
                    ],
                ),
            ],
        ),
    ]


app.layout = html.Div(
    id="get-started-page",
    children=[
        Build_home_page(),
        
    ],
)


if __name__ == '__main__':
    app.run_server(debug=True,
                   use_reloader=False, 
                   port=8080)

Then I got the following error: The children property of a component is a list of lists, instead of just a list. Check the component that has the following contents, and remove one of the levels of nesting:

What could be wrong? I checked my list and seems ok! Each children is packed with a list around it. I cant figure out where the issue is

score 7 · Accepted Answer · answered Jun 20 '20 at 10:15

You have wrapped the children of the most outer Div in a list twice, both inside the Build_home_page and in the layout definition, you should remove one of them. Removing the latter, the layout definition would be

app.layout = html.Div(
    id="get-started-page",
    children=Build_home_page()
)

How to fix: The children property of a component is a list of lists, instead of just a list with Plotly-dash in Python

1 Answers1