✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

How to fix TypeError: The `dash_html_components.Div` component (version 1.0.3) with plotly-dash

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

on this particular section of my code:

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?

So I fixed this by ensuring all the children are wrapped up a list a children at the start of the div to hold all of its children