Black Lives Matter. Please consider donating to Black Girls Code today.

Import part of the Dash Layout based on id

I am trying to set initial values components in a layout but setting values from a stored dict. Here are excerpts from the layout and callback:

layout = html.Div([html.Div([
html.Div(‘Number of plots per page’, style={‘font-family’: ‘Roboto Condensed’}),
html.Div(dcc.Input(id=‘LayoutNos’, type=‘number’, min=1, max=5, value=1), id=‘LayoutNosDiv’)],
html.Div([html.Div(‘Orientation’, style={‘font-family’: ‘Roboto Condensed’}),
[html.Button(html.I(className=“far fa-file”), className=‘orientButtons’,
html.Button(html.I(className=“far fa-file fa-rotate-270”),
className=‘orientButtons’, id=‘landscape’)])],
className=‘row’)], style={‘padding’: ‘10px’})
from PlottingModule.Plot_layout import plot_Layout

inside @app.callback I set the input value for LayoutNos as:
plot_Layout.layout.children[0].children[1].children.value = 4

This works but the solution is not elegant since the previous statement would break if I modify the layout by adding one more html.Div to it. A better way would be to be able to search for the ‘id’ inside the Layout Div and be able to modify the matching parent component. Has somebody been able to do it? I couldn’t figure out how to do this.