Extracting property value from the HTML/Dash components

Dash Python
1

I have a radioItem with two options “kilo” and “Mega”. Based on the user’s choice, I’m using a callback to check the user’s choice and return another radioItem. I’m sending the second radioItem to a html.Div in the original app layout. I’m then using another callback to reference the children property of the html.Div containing the second radioItem and I want to extract the ID of the said radioItem. Please find my code below to have a better idea.

import pandas as pd
import datetime
import dash
import dash_auth
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import dash_table
import urllib
import base64 
import io
from dash_extensions import Download

app=dash.Dash(prevent_initial_callbacks=True,suppress_callback_exceptions=True)

app.layout=html.Div([
    html.H4('Test for Hidden Component'),
    dcc.RadioItems(
        id='RDI',
        options=[{'label':'kilo','value':'k'},
                 {'label':'Mega','value':'M'}],
        value='o',
        labelStyle={'display':'inline-block'}
        ),    
    html.Div(id='hidden-comp'),
    html.H6(id='output')
    ])

@app.callback(Output('hidden-comp', 'children'),
              Input('RDI','value'),
              prevent_initial_call=True)
def back_converter_radio(status):
    if status=='k':
        return dcc.RadioItems(
                id='RDIO',
                options=[{'label':'kW','value':'kw'},
                         {'label':'kWh','value':'kwh'}],
                value='kw',
                labelStyle={'display':'inline-block'}
                )
    else:
        return dcc.RadioItems(
                id='RDIU',
                options=[{'label':'MW','value':'mw'},
                         {'label':'MWh','value':'mwh'}],
                value='mw',
                labelStyle={'display':'inline-block'}
                )

@app.callback(Output('output', 'children'),
              Input('hidden-comp', 'children'),
              prevent_initial_call=True)
def output_fnc(child):
    return child['id']
    
if __name__ == '__main__':
    app.run_server(debug=True)

I’m trying to return the id property to a html.H6 component in the app layout. I’ve tried child[‘id’] and child.id no success. Thank you!

2

Its child['props']['id']

You can find all of the parameters in your child radio-item argument by simply printing it, as follows

def output_fnc(child):
    print(child)
    return child['props']['id']

Let us know if that doesn’t solve your problem.

1 Like