Handle components in list.

Author: T4rk1n

@plotly/dash-test-components/src/components/ComponentAsProp.js

@@ -3,17 +3,19 @@ import PropTypes from 'prop-types';
 
 
 const ComponentAsProp = (props) => {
-    const { element, id } = props;
+    const { element, elements, id } = props;
     return (
         <div id={id}>
-            {element}
+            {elements || element}
         </div>
     )
 }
 
 ComponentAsProp.propTypes = {
     id: PropTypes.string,
     element: PropTypes.node,
+
+    elements: PropTypes.arrayOf(PropTypes.node),
 }
 
 export default ComponentAsProp;

dash/dash-renderer/src/TreeContainer.js

@@ -205,6 +205,22 @@ class BaseTreeContainer extends Component {
                 .map(childrenProp => {
                     const node = _dashprivate_layout.props[childrenProp];
                     if (node) {
+                        if (Array.isArray(node)) {
+                            return assoc(
+                                childrenProp,
+                                node.map((n, i) =>
+                                    this.createContainer(
+                                        this.props,
+                                        n,
+                                        concat(this.props._dashprivate_path, [
+                                            'props',
+                                            childrenProp,
+                                            i
+                                        ])
+                                    )
+                                )
+                            );
+                        }
                         return assoc(
                             childrenProp,
                             this.createContainer(

dash/development/base_component.py

@@ -81,7 +81,7 @@ def __str__(self):
 
     REQUIRED = _REQUIRED()
 
-    def __init__(self, **kwargs):
+    def __init__(self, **kwargs):  # pylint: disable=too-many-branches
         import dash  # pylint: disable=import-outside-toplevel, cyclic-import
 
         self._children_props = []
@@ -134,8 +134,14 @@ def __init__(self, **kwargs):
                     f"\nAllowed arguments: {allowed_args}"
                 )
 
-            if k != "children" and isinstance(v, Component):
-                self._children_props.append(k)
+            if k not in ("children", "id", "style", "className") and not k_in_wildcards:
+                if isinstance(v, Component):
+                    self._children_props.append(k)
+                if hasattr(v, "__iter__"):
+                    for item in v:
+                        if isinstance(item, Component):
+                            self._children_props.append(k)
+                            break
 
             if k == "id":
                 if isinstance(v, dict):

tests/integration/renderer/test_component_as_prop.py

@@ -28,6 +28,20 @@ def test_rdcap001_component_as_prop(dash_duo):
                     Div(id="output-from-prop"),
                 ]
             ),
+            ComponentAsProp(
+                id="elements",
+                elements=[
+                    Div("one", id="list-one"),
+                    Div("two", id="list-two"),
+                    Div(id="list-output"),
+                ],
+            ),
+            Div(
+                [
+                    Button("click-list", id="to-list"),
+                    Div(id="output-from-list"),
+                ]
+            ),
         ]
     )
 
@@ -43,6 +57,16 @@ def from_as_prop(n_clicks):
     def send_nested(n_clicks):
         return f"Nested: {n_clicks}"
 
+    @app.callback(
+        Output("output-from-list", "children"), [Input("list-two", "n_clicks")]
+    )
+    def send_list_output(n_clicks):
+        return f"From list: {n_clicks}"
+
+    @app.callback(Output("list-output", "children"), [Input("to-list", "n_clicks")])
+    def send_to_list(n_clicks):
+        return f"To list: {n_clicks}"
+
     dash_duo.start_server(app)
 
     dash_duo.wait_for_text_to_equal("#as-props", "as-props")
@@ -54,3 +78,15 @@ def send_nested(n_clicks):
     nested = dash_duo.wait_for_element("#send-nested")
     nested.click()
     dash_duo.wait_for_text_to_equal("#nested-output", "Nested: 1")
+
+    elements = dash_duo.find_elements("#elements div")
+
+    assert len(elements) == 3
+
+    to_list = dash_duo.find_element("#to-list")
+    to_list.click()
+    dash_duo.wait_for_text_to_equal("#list-output", "To list: 1")
+
+    from_list = dash_duo.find_element("#list-two")
+    from_list.click()
+    dash_duo.wait_for_text_to_equal("#output-from-list", "From list: 1")