I am receiving this error when I attempt to load a subtab.
My file structure… looks something like this:
```
index.py
app.py
- Tabs
--- portfolio.py
--- leads.py
--- spaces.py
--- revenue.py
--- comps.py
--- analysis.py
--- deal.py
```
App Layout / Tab-subtab structure
```
app.layout = html.Div([
# tabs
html.Div([
dcc.Tabs(
id="tabs",
vertical=True,
className="mb-3",
style={"height":"60", "verticalAlign":"middle", "font-size":"0.9375rem"},
children=[
dcc.Tab(label="Portfolio", value="portfolio_tab"),
dcc.Tab(label="Smart Leads", value="market_tab"),
dcc.Tab(label="Spaces", value="reporting_tab"),
dcc.Tab(label="Revenue", value="revenue_tab",
children=[dcc.Tabs(id="subtabs", style={"margin-left":"50px"},
children=[dcc.Tab(label='Comps', value='comps_subtab'),
dcc.Tab(label='Analysis', value='analysis_subtab')
],
)
]),
dcc.Tab(label="Deal", value="deal_tab")
],
value="revenue_tab",
)
],
className="row tabs_div"
),
# Tab content
html.Div(id="tab_content", style={"margin": "-32% 11%","float":"left"}),
# SubTab content
html.Div(id="subtab_content", style={"margin": "-32% 11%","float":"left"})
])
```
When I click 'comps' and 'analysis' subtab, I receive `NameError: name 'comps' is not defined`. `comps.py` and `analysis.py` are within the tab folder.
Callback functions
```
@app.callback(
Output("tab_content", "children"),
[
Input("tabs", "value"),
Input("subtabs", "value")
],
)
def render_content(tab, subtab):
"""
For user selections, return the relevant tab
"""
if tab == "portfolio_tab":
return portfolio.layout
if tab == "reporting_tab":
return reporting.layout
if tab == "market_tab":
return market.layout
if subtab == "comps_subtab":
return comps.layout
if subtab == "analysis_subtab":
return analysis.layout
elif tab == "deal_tab":
return deal.layout
else:
return (no_update)
```
```
Traceback (most recent call last):
File "/Users/Platform/Deploy/index.py", line 131, in render_content
return comps.layout
NameError: name 'comps' is not defined
```
[1]: https://i.stack.imgur.com/RChg4.png