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

Dash component with "grandchildren" returns: `Error loading dependencies`

I’m trying to develop a checklist with an array of options, where each option has an array of ‘children’ components.
The component is called CollapsableChecklist and you can find the source code in here: https://github.com/Grasia/grasia-dash-components/blob/collapsable-checklist/src/components/CollapsableChecklist.react.js
It works correctly under a pure React.js environment (for example, within the demo script), but it doesn’t when it’s being used inside Dash. If I run python usage.py it loads the server successfully, but if I go to http://127.0.0.1:8050/ I get the following error in the html:

Error loading dependencies

And the following React error on the browser console:

Objects are not valid as a React child (found: object with keys {props, type, namespace}).

The lines that are causing the error are these ones:

grasia_dash_components.CollapsableChecklist(
            id="collapsable-checklist",
            options=[
                { 'label': 'Option without children', 'value': '1' },
                { 'label': 'Collapsable option', 'value': '2', 'children': html.P('Text') },
                { 'label': 'Not collapsable option', 'value': '3', 'children': [generate_card()], 'alwaysExpanded': True }
            ],
            values=['3']
        ),

So either I don’t know how to do it or it seems Dash doesn’t support to define a Dash component which can have children Dash components and those components, similarly, children componentes; all included in a single one component.

A workaround would be to define a middle-level extra component: CollapsableCheckbox, and use it in Dash for the options of CollapsableChecklist.

Dash currently only supports components as the children property (not as a nested property). That is,:

MyCustomComponent(children=html.P('child component')

works, but this doesn’t work:

MyCustomComponent(a_property_with_a_different_name=html.P('child component')

nor does this:

MyCustomComponent(options=[{'children': html.P('child component')}])

To render a Dash component as property, the property must be named children and it must be a top-level component.

This will likely change in the future with https://github.com/plotly/dash-renderer/pull/26, but that’s still a ways out.