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:
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 it loads the server successfully, but if I go to 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:

                { '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 }

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, but that’s still a ways out.