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