Repository: plotly/dash
File: tests/integration/renderer/test_component_as_prop.py (Python)

Code before:
                        "first": Span("first"),
                        "second": Span("second"),
                    },
                    {
                        "id": "multi2",
                        "first": Span("foo"),
                        "second": Span("bar"),
                    },
                ],
            ),
            ComponentAsProp(
                dynamic={
                    "inside-dynamic": Div("dynamic", "inside-dynamic"),
                    "output-dynamic": Div(id="output-dynamic"),
                    "clicker": Button("click-dynamic", id="click-dynamic"),
                    "clicker-dict": Button("click-dict", id="click-dict"),
                    "clicker-list": Button("click-list", id="click-list"),
                    "clicker-nested": Button("click-nested", id="click-nested"),
                },
                dynamic_dict={"node": {"dict-dyn": Div("dict-dyn", id="inside-dict")}},
                dynamic_list=[
                    {"list": Div("dynamic-list", id="inside-list")},
                ],
                dynamic_nested_list=[
                    {"obj": {"nested": Div("nested", id="nested-dyn")}}
                ],
            ),
        ]
    )

    @app.callback(
        Output("output-from-prop", "children"), [Input("clicker", "n_clicks")]
    )
    def from_as_prop(n_clicks):
        return f"From prop: {n_clicks}"

    @app.callback(
        Output("nested-output", "children"), [Input("send-nested", "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}"

Review comment (suggestion):
Pretty low risk, but if you wanted to cover all bases these props should get two keys & two list items to ensure we're properly looping over everything.

Code after:
                        "first": Span("first"),
                        "second": Span("second"),
                    },
                    {
                        "id": "multi2",
                        "first": Span("foo"),
                        "second": Span("bar"),
                    },
                ],
            ),
            ComponentAsProp(
                dynamic={
                    "inside-dynamic": Div("dynamic", "inside-dynamic"),
                    "output-dynamic": Div(id="output-dynamic"),
                    "clicker": Button("click-dynamic", id="click-dynamic"),
                    "clicker-dict": Button("click-dict", id="click-dict"),
                    "clicker-list": Button("click-list", id="click-list"),
                    "clicker-nested": Button("click-nested", id="click-nested"),
                },
                dynamic_dict={
                    "node": {
                        "dict-dyn": Div("dict-dyn", id="inside-dict"),
                        "dict-2": Div("dict-2", id="inside-dict-2"),
                    }
                },
                dynamic_list=[
                    {
                        "list": Div("dynamic-list", id="inside-list"),
                        "list-2": Div("list-2", id="inside-list-2"),
                    },
                    {"list-3": Div("list-3", id="inside-list-3")},
                ],
                dynamic_nested_list=[
                    {"obj": {"nested": Div("nested", id="nested-dyn")}},
                    {
                        "obj": {
                            "nested": Div("nested-2", id="nested-2"),
                            "nested-again": Div("nested-again", id="nested-again"),
                        },
                    },
                ],
            ),
        ]
    )

    @app.callback(
        Output("output-from-prop", "children"), [Input("clicker", "n_clicks")]
    )
    def from_as_prop(n_clicks):
        return f"From prop: {n_clicks}"