Error: Objects are not valid as a React child

[mauritsvanrees]

I have a Plone 6.0 site with Volto 18, volto-light-theme, and collective.volto.formsupport (tried 2.7.0 and 3.0.2). volto-form-block 3.7.3 works fine. But when using latest volto-form-block 3.8.2 (or 3.7.4 or 3.7.5) I get this error when submitting a form:

    Objects are not valid as a React child (found: object with keys {message}). If you meant to render a collection of children, use an array instead.
    
    p
    div
    Message@http://localhost:3001/static/js/client.js:317567:29
    FormResult@http://localhost:3001/static/js/VoltoFormBlockView.chunk.js:700:20
    InnerLoadable@http://localhost:3001/static/js/client.js:2179:34
    div
    Segment@http://localhost:3001/static/js/client.js:321861:18
    div
    div
    FormView@http://localhost:3001/static/js/VoltoFormBlockView.chunk.js:825:18
    ValidateConfigForm@http://localhost:3001/static/js/VoltoFormBlockView.chunk.js:1172:28
    View@http://localhost:3001/static/js/VoltoFormBlockView.chunk.js:1358:14
    InnerLoadable@http://localhost:3001/static/js/client.js:2179:34
    StyleWrapper@http://localhost:3001/static/js/client.js:90646:7
    MaybeWrap@http://localhost:3001/static/js/client.js:130418:9
    div
    MaybeWrap@http://localhost:3001/static/js/client.js:130418:9
    RenderBlocks@http://localhost:3001/static/js/client.js:67113:7
    div
    $2e5fe81f2b094176$export$42a852a2b6b56249@http://localhost:3001/static/js/client.js:364550:122
    DefaultView@http://localhost:3001/static/js/client.js:156415:7
    injectIntl(DefaultView)
    div
    View@http://localhost:3001/static/js/client.js:157707:5
    ConnectFunction@http://localhost:3001/static/js/client.js:242834:103
    injectIntl(Connect(View))
    Route@http://localhost:3001/static/js/client.js:247979:29
    Switch@http://localhost:3001/static/js/client.js:248185:29
    main
    div
    Segment@http://localhost:3001/static/js/client.js:321861:18
    MultilingualRedirector@http://localhost:3001/static/js/client.js:152642:7
    PluggablesProvider@http://localhost:3001/static/js/client.js:131757:28
    App@http://localhost:3001/static/js/client.js:149041:5
    ConnectFunction@http://localhost:3001/static/js/client.js:242834:103
    injectIntl(Connect(App))
    ConnectFunction@http://localhost:3001/static/js/client.js:242834:103
    Route@http://localhost:3001/static/js/client.js:247979:29
    Switch@http://localhost:3001/static/js/client.js:248185:29
    Route@http://localhost:3001/static/js/client.js:247979:29
    AsyncConnect@http://localhost:3001/static/js/client.js:162047:5
    AsyncConnectWithContext@http://localhost:3001/static/js/client.js:162166:9
    C@http://localhost:3001/static/js/client.js:248240:31
    ConnectFunction@http://localhost:3001/static/js/client.js:242834:103
    ScrollToTop@http://localhost:3001/static/js/client.js:167133:1
    ConnectFunction@http://localhost:3001/static/js/client.js:242834:103
    Router@http://localhost:3001/static/js/client.js:247608:30
    ConnectedRouter@http://localhost:3001/static/js/client.js:16501:22
    ConnectedRouterWithContext@http://localhost:3001/static/js/client.js:16607:19
    ConnectFunction@http://localhost:3001/static/js/client.js:242834:103
    IntlProvider@http://localhost:3001/static/js/client.js:239501:9
    ConnectFunction@http://localhost:3001/static/js/client.js:242834:103
    Provider@http://localhost:3001/static/js/client.js:242542:18
    CookiesProvider@http://localhost:3001/static/js/client.js:191616:28

Since this error first appears for me in 3.7.4, it should be related to PR #94 by @giuliaghisini . Any idea?

[giuliaghisini]

i think it's not relateed to that pr.
We are using latest versions of volto-form-block and collective.volto.formSupport with some customizations but not on that specific part where error comes up.

Could you make some debug end eventually make a pr ?

[mauritsvanrees]

I have a PR with a fix.

Just for the record: I had the problem on Volto 18 with volto-light-theme, but I tried in a fresh Volto 17 project and this had the same problem that the form could not be submitted.

[mbarde]

For me this PR did not fix this issue (tested with vanilla Volto 17.15.5 & Plone 6.0.9).

formState.result is now an array which is still not a valid React child, so this line <p>{formState.result}</p> in FormResult.jsx (see) is still throwing the same error.

Furthermore if data.send_message is set, this line is also throwing an error, since it does not expect formState.result to be an array.

PR with fix: #101

[giuliaghisini]

@mauritsvanrees @mbarde that PR doesn't fixes the problem and introduces another error.
i've revrted your pr.
formState.result is a state var that is created with received backend response that should be like this.
{ "data": [ { "field_id": "1715689298710", "label": "Testo lungo", "value": "klkl" } ] }

if you don't obtain that response from server, maybe you have to check your Plone addons installed and their versions, or if you have something in the middle that changes the response format.

[mbarde]

@giuliaghisini Thank you! Yes, the response looks exactly as you describe. But still at this line formState.result is an object like that:

{
   "data": [...],
   "message": "Form successfully submitted",
}

which can not be rendered like that: <p>{formState.result}</p>.

In my opinion the fix should be: <p>{formState.result.message}</p>

[giuliaghisini]

@mbarde your're right! colud you make a pr for this please?

[mbarde]

@giuliaghisini PR: #103

[mauritsvanrees]

I see the same, an Object with a message and data. Copied from console:

Object { message: "Form successfully submitted", data: (1) […] }
​
data: Array [ {…} ]
​​
0: Object { field_id: "1718372796037", label: "Who?", value: "dsfdgdfs" }
​​
length: 1
​​
<prototype>: Array []
​
message: "Form successfully submitted"

​```

Sorry for the mess.  Somehow my PR fixed it for me, and I was surprised that it worked for you without it.  I fixed it as best I could, but my frontend dev and debug skills need work. :-)