Conditional rendering possible?

Dash Python
1

I would like to render a html component or part of it only if some condition is true.
Is that possible?

For example:

html.Div(
    if condition == True:
        children=[
            dcc.Graph(id='plot1'),],
    else:
        children=[
            dcc.Graph(id='plot2'),],
)
2

Hi @fabmeyer

I think that in Dash you need to use a callback to do that.

html.Div(
    id='my_output')

Then use a callback to show the graph you want according with the condition, using ‘my_output’ , ‘children’ as Output.

3

Yes that is possible, you can just use normal Python syntax.

4

@Eduardo @Emil thanks for your reply.

It is clear to me that I can output something different in a callback depending on a given condition.
But if I want to render 3 plots depending on a given condition and 2 plots else, I should to display the third plot only if the condition is true, else it gets None as a value and throws an error.

And as far as I understand conditions are allowed only in the callback part and not in the “html” part.

How can I do this? Many thanks

5

I still don’t see why you can’t just use normal Python conditional syntax. For your example it would be,

condition = True  # or False
return html.Div(children=[dcc.Graph(id='plot1')] if condition else [dcc.Graph(id='plot2')])
1 Like
6

@Emil

Thanks that worked! I’ve never used a callback like this before (returning a whole component). But it’s working that way.