Details
-
Bug
-
Resolution: Done
-
Neutral
-
1.3.3
-
None
-
None
-
Empty show more show less
-
DevX 40, DevX 41
-
5
Description
All React-based projects on SaaS have red warnings in the browser console and will have reduced performance because the child nodes of “EditableArea” do not have unique “key” properties which the React framework mandates.
Warning message is:
react.development.js:315 Warning: Each child in a list should have a unique "key" prop.
You will need to test on SaaS instance.
Technical notes:
The reason appears to be that in the Magnolia react-editor iibrary, the EditableArea code usesr the @id property on the delivery endpoint response for that component to set the “key” value.
However - the Norsu Delivery Endpoint does not supply @id properties for the components as the JCR one does, therefore the react-editor does not set the key property.
Some ideas:
- Change react-editor to use @name property instead of @id?
Please update React, Vue and Angular libraries in order to be consistant. (You will need to test on SaaS instance.)
Norsu response example:
{{}}
{
"@path": "/react-minimal",
"@id": "7e41884d-162f-42b6-91ce-82a03a5ea96e",
"@name": "react-minimal",
"@nodeType": "mgnl:page",
"mgnl:template": "react-minimal-lm:pages/basic",
"name": "react-minimal",
"title": "Let's create something amazing",
"mgnl:lastModified": 1687194843,
"extras": {
"@name": "extras",
"@path": "/react-minimal/extras",
"@nodeType": "mgnl:area",
"components[0]": {
"@name": "components[0]",
"@path": "/react-minimal/extras/components[0]",
"@nodeType": "mgnl:component",
"mgnl:template": "spa-lm:components/headline",
"text": "In this issue",
"@nodes": []
},
Testing on 2023-07-11
Without fix, getting this error:

With the fix, the warning is different:

Checklists
Attachments
1.
|
Implement |
|
Completed | Phong Le Quoc |
2.
|
Review |
|
Completed | Robert Šiška |
3.
|
PiQA |
|
Completed | Robert Šiška |
4.
|
QA |
|
Closed | Christopher Zimmermann |