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: grasia-dash-components/src/components/CollapsableChecklist.react.js at collapsable-checklist · Grasia/grasia-dash-components · GitHub
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.