✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🧬 Learn how to build RNA-Seq data apps with Python & Dash. Register for the May 20 Webinar!

How can I change the text inside CardBody(html.H6) with a callback function (dash python)?

Inside the app.layout I have an input, and when I type some info in it, I want to change the info of the CardBody(html.H6). Trying this way I’ve been having errors like this:

TypeError: The dash_bootstrap_components.Card component (version 0.12.0) with the ID “CardBody(children={}, id=‘card_title1’)” detected a Component for a prop other than children Did you forget to wrap multiple children in an array? Prop id has value CardBody(children={}, id=‘card_title1’)

# This is inside app.layout:

html.Div([
        dcc.Dropdown(
            id='dropdown', 
            options=[{'label':i, 'value':i} for i in df['c'].unique()],
        ),
        html.Div(id='output') 
    ], className='search-bar'),


html.Div(
    [
        dbc.Row(
            [
                dbc.Col(children=[
                    dbc.Card(dbc.CardHeader("Diretor"),
                    dbc.CardBody([
                        html.H6({}, id='card_title1', className="card-title1"),
                        ]), inverse=True)]),
            ],
            className="mb-4 cardsrow",
        ),
    ]
),


### Callback function:

@app.callback(
    Output('card-title1', 'children'),
    Input('dropdown', 'value')
)
def update_output_div(stock_slctd):
    if stock_slctd in df.CNPJ_FUNDO.unique():
        dff = df[df['FUNDO_CODE']==stock_slctd]
    else:
        dff = df[df['FUND_NAME']==stock_slctd]

        name = dff.DIR.iloc[0]
    return name

Hi @tretiner

In your html.H6 delete the {} and will work.