Fix warning about rendering unique elements without keys in EditStage and EditElement

[shapeseas]

See client side warning below (similar warning for EditStage).

Issue:

researcher-portal/src/app/editor/components/EditElement.tsx

Line 117 in 5908d50

const htmlElements = []

researcher-portal/src/app/editor/components/EditElement.tsx

Line 339 in 5908d50

{htmlElements}

htmlElements is an array that's being displayed but no keys were provided for each element. In this case, htmlElements is actually only one element - a form - so it may not need to be an array at all.

Steps to resolve:

• Determine if htmlElements will become a list.
• If it is a list, use map on htmlElements and add keys to each element (Note: keys should NOT be index from map, as react doesn't like that). If it is not a list, remove declaration as an array.

`Warning: Each child in a list should have a unique "key" prop.

Check the render method of EditElement. See https://reactjs.org/link/warning-keys for more information.
form
EditElement@webpack-internal:///(app-pages-browser)/./src/app/editor/components/EditElement.tsx:18:66
div
dialog
Modal@webpack-internal:///(app-pages-browser)/./src/app/editor/components/Modal.tsx:11:28
div
ElementCard@webpack-internal:///(app-pages-browser)/./src/app/editor/components/ElementCard.tsx:16:123
div
div
StageCard@webpack-internal:///(app-pages-browser)/./src/app/editor/components/StageCard.tsx:24:117
div
div
div
Timeline@webpack-internal:///(app-pages-browser)/./src/app/editor/components/Timeline.tsx:25:35
div
div
div
StageProvider@webpack-internal:///(app-pages-browser)/./src/app/editor/stageContext.jsx:19:24
EditorPage@webpack-internal:///(app-pages-browser)/./src/app/editor/page.tsx:28:14
StaticGenerationSearchParamsBailoutProvider@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/static-generation-searchparams-bailout-provider.js:15:64
InnerLayoutRouter@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:242:18
RedirectErrorBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9
RedirectBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:80:24
NotFoundBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:62:62
LoadingBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:338:60
ErrorBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:110:53
InnerScrollAndFocusHandler@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:152:9
ScrollAndFocusHandler@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:227:37
RenderFromTemplateContext@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44
OuterLayoutRouter@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:348:173
InnerLayoutRouter@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:242:18
RedirectErrorBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9
RedirectBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:80:24
NotFoundErrorBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9
NotFoundBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:62:62
LoadingBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:338:60
ErrorBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:110:53
InnerScrollAndFocusHandler@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:152:9
ScrollAndFocusHandler@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:227:37
RenderFromTemplateContext@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44
OuterLayoutRouter@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:348:173
SessionProvider@webpack-internal:///(app-pages-browser)/./node_modules/next-auth/react/index.js:455:18
body
html
RedirectErrorBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9
RedirectBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:80:24
NotFoundErrorBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9
NotFoundBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:62:62
DevRootNotFoundBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:32:24
ReactDevOverlay@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9
HotReload@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:294:37
Router@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:157:93
ErrorBoundaryHandler@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:82:9
ErrorBoundary@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:110:53
AppRouter@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:440:47
ServerRoot@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:126:24
RSCComponent
Root@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:142:24`

[shapeseas]

From Evan: HTMLElements was necessary when there was one mega-component that dealt with Stages AND Elements. Now it's not, so HTMLElements does not need to be an array.