chore(docs): Fixed weird dev error with spreading props and key

I ended up finding this error since trying to load the TextFields page crashes in dev mode because an error was thrown about `<textarea>` should not have multiple `children` and you should use `value` or `defaultValue` instead. It turns out that some version of `next` makes it so that if you use the spread operator **before** a `key` on a JSX element, the element will be forced to have children of: ```ts [undefined, undefined, false, undefined] ``` As I started writing this commit message, looks like it has been logged in the nextjs repo and is related to SWC. Should hopefully be fixed soon.
mlaursen · Jan 18, 2022 · 7cd7b8c · 7cd7b8c · vercel · Jan 18, 2022
1 parent b8f4579
commit 7cd7b8c
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 4 deletions.
diff --git a/packages/documentation/src/components/Demos/Form/FileInputs/SimpleFileUpload.tsx b/packages/documentation/src/components/Demos/Form/FileInputs/SimpleFileUpload.tsx
@@ -45,8 +45,8 @@ export default function SimpleFileUpload(): ReactElement | null {
         {stats.map(({ key, ...uploadStat }, i) => (
           <PreviewFile
             id={`simple-file-upload-preivew-${i + 1}`}
-            {...uploadStat}
             key={key}
+            {...uploadStat}
             fileKey={key}
             remove={remove}
           />

diff --git a/packages/documentation/src/components/Demos/Form/SelectFields/NativeSelectExample.tsx b/packages/documentation/src/components/Demos/Form/SelectFields/NativeSelectExample.tsx
@@ -69,8 +69,8 @@ export default function NativeSelectExample(): ReactElement {
       }) => (
         <NativeSelect
           id="configurable-native-select"
-          {...props}
           key={`${optgroup}-${multiple}`}
+          {...props}
           label={label}
           icon={icon ? undefined : null}
           size={multiple ? parseInt(size, 10) : undefined}

diff --git a/packages/documentation/src/components/Demos/Form/SelectionControls/MenusWithFormControls.tsx b/packages/documentation/src/components/Demos/Form/SelectionControls/MenusWithFormControls.tsx
@@ -45,8 +45,8 @@ export default function MenusWithFormControls(): ReactElement | null {
         ...values.map((value, i) => (
           <MenuItemCheckbox
             id={`some-group-id-${i + 1}`}
-            {...getProps(value)}
             key={value}
+            {...getProps(value)}
           >
             {labels[value]}
           </MenuItemCheckbox>

diff --git a/packages/documentation/src/components/Demos/Form/TextFields/TextAreaExample.tsx b/packages/documentation/src/components/Demos/Form/TextFields/TextAreaExample.tsx
@@ -34,8 +34,8 @@ export default function TextAreaExample(): ReactElement {
       renderField={(props) => (
         <TextArea
           id="configurable-textarea"
-          {...props}
           key={`${rows}-${resize}`}
+          {...props}
           rows={rowsInt}
           maxRows={maxRowsInt}
           resize={resize}