AccordionItem do not work with Dash component as children

[ghost]

Trying to get AccordionItem to work with Dash component as children produce a react error.

import dash
from dash import dcc
from dash import html
import dash_bootstrap_components as dbc
import dash_daq as daq
from dash.dependencies import Input, Output, State, MATCH, ALL
import flask
from flask import Flask, render_template, redirect, url_for

gTheme = dbc.themes.SUPERHERO
server = flask.Flask(__name__)

app = dash.Dash(name='Home',
                    url_base_pathname='/',
                    external_stylesheets=[gTheme],
                    server=server,
                )

def layout():
    return dbc.Accordion(
    [
        dbc.AccordionItem(
            children=html.Div([
                dbc.Button("Does this work ?", id={"type": "b-0", "index": 0}),
                dbc.Button("ex01", id={"type": "b-1", "index": 0}),
                dbc.Button("okokok", id={"type": "b-2", "index": 0})
            ]),
            title="Item->1"),
        dbc.AccordionItem(
            children=html.Div([
                dbc.Button("Does this work ?", id={"type": "b-0", "index": 1}),
                dbc.Button("ex01", id={"type": "b-1", "index": 1}),
                dbc.Button("okokok", id={"type": "b-2", "index": 1})
            ]),
            title="Item->2")
    ],
    start_collapsed=True
    )

app.layout = layout()
app.run_server(host="127.0.0.1",
               port="12333",
               dev_tools_silence_routes_logging=True,
               debug=False)

Nothing is displayed and the browser console gives an error :

dash_renderer.v2_0_0m1632989738.min.js:2 Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7Bnamespace%2C%20props%2C%20type%7D&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at Nc (react-dom@16.v2_0_0m1632989738.14.0.min.js:72)
    at react-dom@16.v2_0_0m1632989738.14.0.min.js:81
    at T (react-dom@16.v2_0_0m1632989738.14.0.min.js:95)
    at zj (react-dom@16.v2_0_0m1632989738.14.0.min.js:230)
    at Th (react-dom@16.v2_0_0m1632989738.14.0.min.js:152)
    at tj (react-dom@16.v2_0_0m1632989738.14.0.min.js:152)
    at Te (react-dom@16.v2_0_0m1632989738.14.0.min.js:146)
    at react-dom@16.v2_0_0m1632989738.14.0.min.js:61
    at unstable_runWithPriority (react@16.v2_0_0m1632989738.14.0.min.js:25)
    at Da (react-dom@16.v2_0_0m1632989738.14.0.min.js:60)

Which if we follow the link says :

Objects are not valid as a React child (found: object with keys {namespace, props, type}). If you meant to render a collection of children, use an array instead.

I've tried with dbc.Card, dbc.Container instead of html.Div with no success.

Note that the example given at https://dbc-v1.herokuapp.com/docs/components/accordion/ do not work as well :

import dash_bootstrap_components as dbc
from dash import html

accordion = html.Div(
    dbc.Accordion(
        [
            dbc.AccordionItem(
                [
                    html.P("This is the content of the first section"),
                    dbc.Button("Click here"),
                ],
                title="Item 1",
            ),
            dbc.AccordionItem(
                [
                    html.P("This is the content of the second section"),
                    dbc.Button("Don't click me!", color="danger"),
                ],
                title="Item 2",
            ),
            dbc.AccordionItem(
                "This is the content of the third section",
                title="Item 3",
            ),
        ],
    )
)

[ghost]

Nevermind, I was on release 1.0.0b3. Upgrading to 1.0.0rc1 fixed this issue.

[tcbegley]

Thanks for raising in any case!