Props suddenly hidden behind `_dashprivate_layout`

[philip-peterson]

Hi there,

We have a React component (called Tabs) that contains some Tab child elements. Note that these are not the dash_core_components Tab and Tabs components. So our code looks something like this:

    html.Div(
        children=[
            Tabs(
                id="tab-group",
                currentTabId="shelley",
                children=[
                    Tab(
                        id="shelley",
                        name="Shelley",
                        children=[
                            html.Div("I met a traveler from an antique land"),
                            html.Div("Who said: “Two vast and trunkless legs of stone"),
                        ],
                    ),
                    Tab(
                        id="williams",
                        name="Williams",
                        children=[
                            html.Div("I have eaten"),
                            html.Div("the plums"),
                            html.Div("that were in"),
                            html.Div("the icebox"),
                        ],
                    ),
                ],
            )
        ]
    ),

We are doing some stuff inside Tabs that tries to clone the Tab sub-elements and reassign some properties (mostly assigning an isSelected prop). We were previously using Dash 0.38, and after upgrading, it seems that the properties of the Tab components, as exposed to Tabs via props.children, appear like so:

props(of Tab):
   _dashprivate_layout:
      namespace: "components_package_name_here"
      props:
         type:
            "Tab"

So basically instead of the props actually being right there inside of props, they are now inside of props._dashprivate_layout. Was this change intentional, and if so is there some insight on the reasoning behind it so we can better understand, please?

Thanks!

[wbrgss]

@philip-peterson This (breaking) change was intentional, and was documented in the Dash 0.40.0 release announcement:

Note: If you were using props.children.props in your components, this will no longer work. The information about the direct children can still be accessed through _dashprivate_layout like in the dcc tabs. You can also have a look at the PRs here and here for details.

Component type information still available but only as a type/namespace string

From what I understand, the change was made because e.g. [child].props.children.props.type was ambiguous/confusing, and potentially brittle when introducing React upgrades.

[philip-peterson]

@wbrgss Thanks for that link. It would be helpful to other devs such as myself if information like this were communicated in the changelog, as it's not obvious to check the forums. Just as a case study, I was looking at the Dash changelog which indicates that dash-renderer was upgraded to v0.21, and all the dash-renderer changelog says is the following:

* Optimize rendering
* Always assign setProps to components

Again, thanks for the help!

[wbrgss]

It would be helpful to other devs such as myself if information like this were communicated in the changelog

Yep, agreed. cc @Marc-Andre-Rivet :wink: