An object was provided as `children` instead of a component, string, or number (or list of those). Check the children property that looks something like:

Hi, I have built a multipage dash app and am trying to update it to use dash-pages. I have been getting an error that is now driving me nuts. An object was provided as children instead of a component, string, or number (or list of those). Check the children property that looks something like:

I know this has been brought up before, but I have yet to see any solid resolution to the problem. My app is tricky because it has a navbar on the app.py page. Then, I try and add a second navbar to internal pages. However, I think it has a problem knowing what to render. Initially, everything works, but then eventually it stops or sometimes renders the wrong page or leaves the internal navbar on the home page…and of course, calls this error. Any advice would be greatly appreciated. If I reload the page, it temporarily corrects itself.

Hi @pmaye and welcome to the Dash community :slightly_smiling_face:

That error can be tricky, but it actually has a helpful error message.

Check the children property that looks something like:

If you look at the rest of that error message, it shows where the problem is. It would be helpful to try to isolate that section in a minimal example, and it’s likely you will find the answer. If not, feel free to post the code here and someone is likely to help.

1 Like

Thanks for responding. Here is the error message:
{
“props”: {
“children”: [
null,
null,
{
“props”: {
“children”: [
null,
null,
{
“props”: {
“children”: [
{
“props”: {
“children”: [
{
“props”: {
“pathname”: “/Project2”,
“href”: “http://127.0.0.1:8050/Project2”
}
}
]
}
}
]…
The problem is that the page it calls in this error is always different depending on what links I select.

Hi @pmaye

There isn’t enough info here to help. What does the callback look like? Can you make a simple app with just that callback to isolate the issue?

For example, below is a minimal example that produced the same type of error. In this case, a figure is being returned to the children prop of a html.Div instead of the figure prop of a dcc.Graph. If you can make a similar minimal example with the callback from your app that produces the error, it will be easier to help.



from dash import Dash, dcc, html, Input, Output, callback
import plotly.express as px

df = px.data.tips()

app = Dash(__name__)

dropdown = dcc.Dropdown(["Fri", "Sat", "Sun"], "Fri", clearable=False)


app.layout = html.Div([html.H4("Restaurant tips by day of week"), dropdown, html.Div(id="graph")])


@callback(Output("graph", "children"), Input(dropdown, "value"))
def update_bar_chart(day):
    mask = df["day"] == day
    fig = px.bar(df[mask], x="sex", y="total_bill", color="smoker", barmode="group")
    return fig


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




thanks for the suggestion. I have located the problem, just not sure how to fix it yet. I have engineered a button to change its url based on an input from a table. It works but is causing this problem with loading pages. Not sure how to fix this. thanks for your help!

this is part of the layout where the problem is:

html.Div([
                dcc.Location(id='new_page', refresh=False),
                html.Div([html.A ([dbc.Button('µCT Images', id='btn-nclicks-1',className="mr-2", style=CT, n_clicks=0)],
                id='url',
                href='https://ucsci.uchc.edu/bonebase/GeneEntry.html?GeneSymbol=Irf8+MicroCT_FemurTrab',
                target='_blank'),

                        ],style={'margin-left':10}),])


This is the callback:

@callback(Output('url', 'href'),
            [Input('btn-nclicks-1','n_clicks')],
            [Input('Table','selected_rows')],
              )

def display_page_contents(n_clicks,selected_rows):
    # Logic to extract the parameters you need from the pathname. This could vary if you are using a multi-page app, for example
    if len(selected_rows) > 0 & n_clicks >= 0:
        value = genelist[selected_rows]
        s = value
        n = ''.join([str(elem) for elem in s])
        string = 'https://ucsci.uchc.edu/bonebase/GeneEntry.html?GeneSymbol=Irf8+MicroCT_FemurTrab'
        pathname = string.replace('Irf8', n)
        return (pathname)
    elif n_clicks==1 & len(selected_rows)== 0:
        return 'https://ucsci.uchc.edu/bonebase/GeneEntry.html?GeneSymbol=Irf8+MicroCT_FemurTrab'

    else:
        raise dash.exceptions.PreventUpdate

I’m still not sure I see a whole lot wrong. A couple things (but they might not solve the problem)

The dbc.Button has an href prop, so you don’t need to wrap it in a html.A. So you div could look like:

html.Div([
    dcc.Location(id='new_page', refresh=False),
    dbc.Button(
        'µCT Images',
        id='btn-nclicks-1',
        className="mx-2",
        style=CT,
        n_clicks=0,
        href='https://ucsci.uchc.edu/bonebase/GeneEntry.html?GeneSymbol=Irf8+MicroCT_FemurTrab',
        target='_blank',
        external_link=True
   ),
])


Then the callback: (I also added a print statement to see if there is anything weird going on with that pathname - but :woman_shrugging)


@callback(
    Output('btn-nclicks-1', 'href'),
    Input('btn-nclicks-1','n_clicks'),
    Input('Table','selected_rows')
)
def display_page_contents(n_clicks,selected_rows):
    # Logic to extract the parameters you need from the pathname. This could vary if you are using a multi-page app, for example
    if len(selected_rows) > 0 & n_clicks >= 0:
        value = genelist[selected_rows]
        s = value
        n = ''.join([str(elem) for elem in s])
        string = 'https://ucsci.uchc.edu/bonebase/GeneEntry.html?GeneSymbol=Irf8+MicroCT_FemurTrab'
        pathname = string.replace('Irf8', n)
        print(pathname)        
        return (pathname)
    elif n_clicks==1 & len(selected_rows)== 0:
        return 'https://ucsci.uchc.edu/bonebase/GeneEntry.html?GeneSymbol=Irf8+MicroCT_FemurTrab'

    else:
        raise dash.exceptions.PreventUpdate


1 Like

Thanks for your help. Your code almost works perfectly, except I still get the same error. However, If I comment out the dcc.Location(…) line of code, then no errors occur and it works perfectly. I was thinking about this last night thinking that dcc.Location probably wasn’t necessary.