From 7cd7b8cfb62147b8dc791d2566c090c45be52d19 Mon Sep 17 00:00:00 2001
From: Mikkel Laursen <mlaursen03@gmail.com>
Date: Tue, 18 Jan 2022 16:36:25 -0700
Subject: [PATCH] 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.
---
 .../src/components/Demos/Form/FileInputs/SimpleFileUpload.tsx   | 2 +-
 .../components/Demos/Form/SelectFields/NativeSelectExample.tsx  | 2 +-
 .../Demos/Form/SelectionControls/MenusWithFormControls.tsx      | 2 +-
 .../src/components/Demos/Form/TextFields/TextAreaExample.tsx    | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/documentation/src/components/Demos/Form/FileInputs/SimpleFileUpload.tsx b/packages/documentation/src/components/Demos/Form/FileInputs/SimpleFileUpload.tsx
index 550d49f1ad..96fe8573e9 100644
--- 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
index 473a5b2f2b..bb84de6694 100644
--- 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
index 1f1ef21cd3..a258120168 100644
--- 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
index edd0df6d5e..1375ec74fe 100644
--- 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}