Dash wrap multiple `children'

Dash Python
1

Hello everyone, I am a beginner and I am trying to write an application, at the moment I am facing an error:

TypeError: The `dash_html_components.Div` component (version 1.1.1) with the ID "Div(className='sidebar-wrapper')" detected a Component for a prop other than `children`
Did you forget to wrap multiple `children` in an array?
Prop id has value Div(className='sidebar-wrapper')
,

can you tell me how to decide and not to face it in the future?
Thank!
code app

import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
import pandas as pd
import dash


app = dash.Dash()

app.layout = html.Div(
    [html.Div(
        html.Div(
                html.Div(html.A("Statistics", className="simple-text logo-normal"), className="logo"),
    html.Div(className="sidebar-wrapper")
), className="sidebar"),
                       html.Div(html.Div(html.Div(className="container-fluid"),
                                         className="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top "),
                                className="main-panel")])

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

In your code, you have something like

html.Div(html.Div(...), html.Div(...))

whereas whenever you want to nest multiple components inside another component you must pass them inside a list (Python analogue of a JavaScript Array).

html.Div([html.Div(...), html.Div(...)])

Here’s an edited version of your layout that should resolve the error.

app.layout = html.Div(
    [
        html.Div(
            html.Div(
                [
                    html.Div(
                        html.A(
                            "Statistics", className="simple-text logo-normal"
                        ),
                        className="logo",
                    ),
                    html.Div(className="sidebar-wrapper"),
                ]
            ),
            className="sidebar",
        ),
        html.Div(
            html.Div(
                html.Div(className="container-fluid"),
                className="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top ",
            ),
            className="main-panel",
        ),
    ]
)
3

Thank you, yes, this is how it works, I will continue to try