CODEWITHSUNDEEP
pythonplotlyplotly-dash
JA-pythonista
JA-pythonista

Reputation: 1323

Plotly Dash: How to resolve the error dash_html_components.Div detected a component for a prop other than children

I am trying to add text in line with my plots such that my text are easy to understand with the results of the plots. When I try to structure the first tab, I get the following error:

TypeError: The dash_html_components.Divcomponent (version 1.0.3) with the ID "Div(children=(Br(None), P('Select a year and month to query'), Br(None)), id='paragraph1')" detected a Component for a prop other thanchildrenDid you forget to wrap multiplechildren in an array? Prop n_clicks has value Div(children=[Dropdown(id='month', options=[{'label': 'January', 'value': 1}, {'label': 'February', 'value': 2}, {'label': 'March', 'value': 3}, {'label': 'April', 'value': 4}, {'label': 'May', 'value': 5}, {'label': 'June', 'value': 6}, {'label': 'July', 'value': 7}, {'label': 'August', 'value': 8}, {'label': 'September', 'value': 9}, {'label': 'October', 'value': 10}, {'label': 'November', 'value': 11}, {'label': 'December', 'value': 12}], value=3, style={'width': '50%'})], style={'width': '100%', 'display': 'flex', 'flex-direction': 'row'})

And here is the section of the code that is buggy:

def tab_layout():

     return html.Div(

            html.Div(

                        id="markdown-container",

                        children=dcc.Markdown(

                            children=(

                                """

                                    my text text

                                    ### Funnel Area Chat

                                    more text more text more text

                    """

                            ), 

                            style={"color": "white"}

                        ),

                    ),

            

            html.Div(

                id="paragraph1",

                children= (

                    html.Br(),

                    html.P("Select a year and month to query"),

                    html.Br()

                    

                )

                

            ),

             

             html.Div([

                dcc.Dropdown(

                    id="month",

                    options= month_options(),

                    value=3,

                    style={"width": "50%"}

                    ),

                    ], style={"width": "100%", "display": "flex", "flex-direction": "row"}),

                 dcc.Dropdown(

                     id="year",

                     options=[

                         {"label": "2019", "value": 2019},

                         {"label": "2020", "value": 2020}

                     ],

                     value=2020,

                     style={"width": "50%", "display": "flex", "flex-direction": "row", 

                            "justify-content": "left"}

                     ),

            html.Div([

                dcc.Graph(id="funnel_plot",

                          config= {

                              "displaylogo": False,

                              "toImageButtonOptions": {"width": None, "height": None}

                          }

                            

                        )

                ], style={"width": "100%", "display": "inline-block"})

                )

What could be wrong? The compiler does not see any error?

Upvotes: 1

Views: 6880

Answers (1)

user11989081
user11989081

Reputation: 8654

When you include multiple elements in the children property of an html.Div() you need to make sure that they are enclosed in square brackets, as the children property of an html.Div() is a list (see the documentation).

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objects as go

app = dash.Dash()

app.layout = html.Div(children=[

    html.Div(children=[

        html.Div(

            id="markdown-container",

            children=dcc.Markdown(

                children="""

                        my text text

                        ### Funnel Area Chat

                        more text more text more text

                    """,

                style={"color": "white"}

            ),

        ),

        html.Div(

            id="paragraph1",

            children=[

                html.Br(),

                html.P("Select a year and month to query"),

                html.Br()

            ]

        ),

        html.Div(children=[

            dcc.Dropdown(

                id="month",

                value=3,

                style={"width": "50%"}

            ),

        ], style={"width": "100%", "display": "flex", "flex-direction": "row"}),

        dcc.Dropdown(

            id="year",

            options=[

                {"label": "2019", "value": 2019},

                {"label": "2020", "value": 2020}

            ],

            value=2020,

            style={"width": "50%", "display": "flex", "flex-direction": "row",

                   "justify-content": "left"}

        ),

        html.Div(children=[

            dcc.Graph(id="funnel_plot",

                      config={

                          "displaylogo": False,

                          "toImageButtonOptions": {"width": None, "height": None}

                      }

            ),

        ], style={"width": "100%", "display": "inline-block"}),

    ])

])

app.run_server(debug=False)

Upvotes: 4

Related Questions