title: Dash app - Dynamically Create a Layout for Multi-Page App Validation [Error: A nonexistent object was used in an `State` of a Dash callback.]
body: <p>I have a Dash application where I'm trying to load a few additional input cells which depend on the input of an earlier cell</p>
  <p>I.e.</p>
  <pre><code>if input (query-input-1-state) = MOVE --&gt; additional set0 of inputs load (input-X-state,input-Y-state)
  if input (query-input-1-state) = PARABOLIC --&gt; additional set1 of inputs load for further submission (input-XX-state,input-YY-state)
  </code></pre>
  <p>The code is this - the layouts file (I have followed the dash multipage app template) file contains the main layout and the sub-layouts for additional inputs (layout_query_parabolic and layout_query_move).</p>
  <pre><code>layouts.py
  layout_menu = html.Div([
      dcc.Link('Run Query', href='/apps/query'),html.Br(),
      dcc.Link('Optimise', href='/apps/optimise'),html.Br(),
  ])
  
  #Set 0 of input boxes
  layout_query_move = html.Div([
                          dcc.Input(id='input-X-state', type='number', value=2),html.Br(),
                          dcc.Input(id='input-Y-state', type='number', value=3),html.Br(),
                          ])
  
  #Set 1 of input boxes
  layout_query_parabolic = html.Div([
                          dcc.Input(id='input-XX-state', type='number', value=6),html.Br(),
                          dcc.Input(id='input-YY-state', type='number', value=7),html.Br(),
                          dcc.Input(id='input-Z-state', type='number', value=8),html.Br(),
                          ])
  
  layout_query_menu = html.Div([
      dcc.Link('Go to Main', href='/apps/'),html.Br(),
      html.H3('Enter settings for Move'),
      dbc.Label(&quot;Ticker:        &quot;, size=&quot;md&quot;),dcc.Input(id='query-input-0-state', type='text', value='QQQ'),
      dbc.Label(&quot;Event:         &quot;, size=&quot;md&quot;),dcc.Input(id='query-input-1-state', type='text', value='MOVE'),
      html.Div(id='full-input-boxes'),
      html.Button(id='submit-button-state2', n_clicks=0, children='Show all inputs'),
      html.Button(id='submit-button-state', n_clicks=0, children='Go!'),
      dcc.Graph(id='graph-with-slider'),
  ])
  </code></pre>
  <p>The callbacks file declares 2 callbacks - one for the main page - and the other to show additional inputs which depends on the input into query-input-1-state.</p>
  <pre><code>callbacks.py
  
  #Validation layout to 'declare' all the input values
  app.validation_layout = html.Div([ 
      layout_query_move,
      layout_query_parabolic,
      layout_menu,
      layout_query_menu,
      layout_optimise,
      dcc.Input(id='input-X-state', type='number', value=2), #set 0 of inputs
      dcc.Input(id='input-Y-state', type='number', value=3), #set 0 of inputs
  
      dcc.Input(id='input-XX-state', type='number', value=6), #set 1 of inputs
      dcc.Input(id='input-YY-state', type='number', value=7), #set 1 of inputs
      dcc.Input(id='input-Z-state',  type='number', value=8), #set 1 of inputs
  ])
  
  flask.has_request_context() == False
  
  @app.callback(
      Output('graph-with-slider', 'figure'),
      Input('submit-button-state', 'n_clicks'),
      State('query-input-0-state', 'value'),
      State('query-input-1-state', 'value'),
      State('input-X-state', 'value'),
      State('input-Y-state', 'value'),
      State('input-XX-state', 'value'),
      State('input-YY-state', 'value'),
      State('input-Z-state', 'value'),
               )
  def display_value0(n_clicks,v0,v1, v2,v3,v4,v5,v6):
      d = {'x': [v2, v2], 'y': [v2, v2]}
      df = pd.DataFrame(data=d)
      filtered_df = df
      fig = px.scatter(filtered_df, x=&quot;x&quot;, y=&quot;y&quot;)
      fig.update_layout(transition_duration=500)
      return fig
  
  
  @app.callback(
      Output('full-input-boxes', 'children'),
      Input('submit-button-state2', 'n_clicks'),
      State('query-input-1-state', 'value'),
  )
  def ask_for_more_inputs(n_clicks,event_id): #,asset_str,event_str
      if not n_clicks: raise dash.exceptions.PreventUpdate
      if event_id == 'MOVE': return layout_query_move
      if event_id == 'PARABOLIC': return layout_query_parabolic
  </code></pre>
  <p>The app entry page is this (declares the app layout):</p>
  <pre><code>index.py #App Entry page
  
  app.layout = html.Div([
      dcc.Location(id='url', refresh=False),
      html.Div(id='page-content'),
  ])
  
  @app.callback(
          Output('page-content', 'children'),
          Input('url', 'pathname')
               )
  def display_page(pathname):
      if pathname == '/apps/':
           return layout_menu
      elif pathname == '/apps/query':
           return layout_query_menu
      elif pathname == '/apps/optimise':
           return layout_optimise
      elif pathname == '/apps/move':
           return layout_query_move
  
  if __name__ == '__main__':
      app.run_server(debug=True)
  </code></pre>
  <p>I however get an nonexistent object error with:</p>
  <pre><code>A nonexistent object was used in an `State` of a Dash callback. The id of this object is 
  `input-X-state` and the property is `value`. 
  </code></pre>
  <p>I have declared the validation layout and have tried turning off the errors through going directly into flask under the hood, however these two measures don't seem to have helped. I have also tried moving around the declaration for the validation but that doesn't make any difference. The callback which takes <code>input-X-state</code> doesn't recognise both sets of inputs (X,Y) and (XX,YY,Z) and the chart never updates.</p>
  <p>How can I fix this?</p>