Fix ExternalWrapper children render

Author: T4rk1n

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

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 
-const ExternalComponent = ({ id, text, input_id }) => {
+const ExternalComponent = ({ id, text, input_id, extra_component }) => {
     const ctx = window.dash_component_api.useDashContext();
     const ExternalWrapper = window.dash_component_api.ExternalWrapper;
 
@@ -15,6 +15,14 @@ const ExternalComponent = ({ id, text, input_id }) => {
                 value={text}
                 componentPath={[...ctx.componentPath, 'external']}
             />
+            {
+                extra_component &&
+                <ExternalWrapper
+                    componentType={extra_component.type}
+                    componentNamespace={extra_component.namespace}
+                    componentPath={[...ctx.componentPath, 'extra']}
+                    {...extra_component.props}
+            />}
         </div>
     )
 }
@@ -23,6 +31,11 @@ ExternalComponent.propTypes = {
     id: PropTypes.string,
     text: PropTypes.string,
     input_id: PropTypes.string,
+    extra_component: PropTypes.exact({
+        type: PropTypes.string,
+        namespace: PropTypes.string,
+        props: PropTypes.object, 
+    }),
 };
 
 export default ExternalComponent;

dash/dash-renderer/src/wrapper/ExternalWrapper.tsx

@@ -3,7 +3,7 @@ import {useDispatch} from 'react-redux';
 
 import {DashLayoutPath} from '../types/component';
 import DashWrapper from './DashWrapper';
-import {insertComponent, removeComponent} from '../actions';
+import {insertComponent, removeComponent, updateProps} from '../actions';
 
 type Props = {
     componentPath: DashLayoutPath;
@@ -32,7 +32,7 @@ function ExternalWrapper({
                 component: {
                     type: componentType,
                     namespace: componentNamespace,
-                    props: {}
+                    props: props
                 },
                 componentPath
             })
@@ -43,10 +43,14 @@ function ExternalWrapper({
         };
     }, []);
 
+    useEffect(() => {
+        dispatch(updateProps({itempath: componentPath, props}));
+    }, [props]);
+
     if (!inserted) {
         return null;
     }
     // Render a wrapper with the actual props.
-    return <DashWrapper componentPath={componentPath} {...props} />;
+    return <DashWrapper componentPath={componentPath} />;
 }
 export default ExternalWrapper;

tests/integration/renderer/test_external_component.py

@@ -8,7 +8,19 @@ def test_rext001_render_external_component(dash_duo):
         [
             dcc.Input(id="sync", value="synced"),
             html.Button("sync", id="sync-btn"),
-            ExternalComponent("ext", input_id="external", text="external"),
+            ExternalComponent(
+                id="ext",
+                input_id="external",
+                text="external",
+                extra_component={
+                    "type": "Div",
+                    "namespace": "dash_html_components",
+                    "props": {
+                        "id": "extra",
+                        "children": [html.Div("extra children", id="extra-children")],
+                    },
+                },
+            ),
         ]
     )
 
@@ -25,3 +37,5 @@ def on_sync(_, value):
     dash_duo.wait_for_text_to_equal("#external", "external")
     dash_duo.find_element("#sync-btn").click()
     dash_duo.wait_for_text_to_equal("#external", "synced")
+
+    dash_duo.wait_for_text_to_equal("#extra", "extra children")