Issue on page /mastering-plone/dexterity_reference.html

[tjprescott]

I'm trying to do the mixed field datagrid example: https://training.plone.org/mastering-plone/dexterity_reference.html#mixedfield-datagrid-field

When I follow the example and load the widget in Classic UI, it looks like this:

And when I try to load this in Volto I just get this error page:

Sorry, something went wrong with your request 
Objects are not valid as a React child (found: object with keys {items}). If you meant to render a collection of children, use an array instead.

    at span
    at TextWidget (http://localhost:3001/static/js/client.js:155088:5)
    at div
    at Segment (http://localhost:3001/static/js/client.js:243650:24)
    at div
    at GridRow (http://localhost:3001/static/js/client.js:238762:24)
    at div
    at Grid (http://localhost:3001/static/js/client.js:238538:22)
    at div
    at div
    at Container (http://localhost:3001/static/js/client.js:241118:24)
    at DefaultView (http://localhost:3001/static/js/client.js:152228:5)
    at injectIntl(DefaultView)
    at div
    at View (http://localhost:3001/static/js/client.js:154076:5)
    at ConnectFunction (http://localhost:3001/static/js/client.js:213702:68)
    at injectIntl(Connect(View))
    at Route (http://localhost:3001/static/js/client.js:219264:29)
    at Switch (http://localhost:3001/static/js/client.js:219470:29)
    at main
    at div
    at Segment (http://localhost:3001/static/js/client.js:243650:24)
    at MultilingualRedirector (http://localhost:3001/static/js/client.js:148102:5)
    at PluggablesProvider (http://localhost:3001/static/js/client.js:125787:5)
    at App (http://localhost:3001/static/js/client.js:143713:5)
    at ConnectFunction (http://localhost:3001/static/js/client.js:213702:68)
    at injectIntl(Connect(App))
    at ConnectFunction (http://localhost:3001/static/js/client.js:213702:68)
    at Route (http://localhost:3001/static/js/client.js:219264:29)
    at Switch (http://localhost:3001/static/js/client.js:219470:29)
    at Route (http://localhost:3001/static/js/client.js:219264:29)
    at AsyncConnect (http://localhost:3001/static/js/client.js:159705:5)
    at AsyncConnectWithContext (http://localhost:3001/static/js/client.js:159824:7)
    at C (http://localhost:3001/static/js/client.js:219525:37)
    at ConnectFunction (http://localhost:3001/static/js/client.js:213702:68)
    at ScrollToTop (http://localhost:3001/static/js/client.js:164867:1)
    at ConnectFunction (http://localhost:3001/static/js/client.js:213702:68)
    at Router (http://localhost:3001/static/js/client.js:218893:30)
    at ConnectedRouter (http://localhost:3001/static/js/client.js:17738:7)
    at ConnectedRouterWithContext (http://localhost:3001/static/js/client.js:17844:25)
    at ConnectFunction (http://localhost:3001/static/js/client.js:213702:68)
    at IntlProvider (http://localhost:3001/static/js/client.js:210828:9)
    at ConnectFunction (http://localhost:3001/static/js/client.js:213702:68)
    at Provider (http://localhost:3001/static/js/client.js:213416:20)
    at CookiesProvider (http://localhost:3001/static/js/client.js:175725:28)

I'm not sure what I might have done wrong.

[ksuess]

I understand that this is confusing. The mixed field / datagrid field is not rendered by the default view for non-block-enabled content types. The default view, which lists all field values should render the value of the mixed field without error. A PR on https://github.com/plone/volto/blob/4e0f9097c900fb81f98a5fd54dbd01e532df371f/packages/volto/src/components/theme/View/DefaultView.jsx#L86 to get an appropriate widget also for a JSONField field could prevent this confusion.

In the mean time, until the default view for content types that are not blocks enabled is enhanced, you can enable the behavior "blocks" on your custom content type. You will see just the title. In edit mode you can see all fields including the mixed field / datagrid field on the right inside the sidebar.

For the display it is up to the developer to create a component displaying the datagrid values. This is highly depending on the needs of the project and the values of the datagrid. An example content type view with a component rendering the datagrid field values can be found in the tutorial.