return Fragment instead array to fix incorrect return type

Author: dcastil

packages/editor/src/Theme/FontSizes.tsx

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { jsx, useThemeUI } from 'theme-ui'
+import { Fragment } from 'react'
 import { Field } from '@theme-ui/components'
 import { EditorContextValue } from '../types'
 
@@ -25,17 +26,21 @@ const FontSizes = () => {
     }
   }
 
-  return Object.keys(fontSizes).map(key => (
-    <div key={key}>
-      <Field<'input'>
-        type="number"
-        label={key}
-        name={'fontSizes.' + key}
-        value={fontSizes[key]}
-        onChange={onChange(key)}
-      />
-    </div>
-  ))
+  return (
+    <Fragment>
+      {Object.keys(fontSizes).map(key => (
+        <div key={key}>
+          <Field<'input'>
+            type="number"
+            label={key}
+            name={'fontSizes.' + key}
+            value={fontSizes[key]}
+            onChange={onChange(key)}
+          />
+        </div>
+      ))}
+    </Fragment>
+  )
 }
 
 export default FontSizes

packages/editor/src/Theme/FontWeights.tsx

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { jsx, useThemeUI } from 'theme-ui'
+import { Fragment } from 'react'
 import * as CSS from 'csstype'
 import Combobox from '../Combobox'
 import { EditorContextValue } from '../types'
@@ -18,17 +19,21 @@ const FontWeights = () => {
     })
   }
 
-  return Object.keys(fontWeights).map(key => (
-    <div key={key}>
-      <Combobox
-        label={key}
-        name={'fontWeights.' + key}
-        value={fontWeights[key]}
-        onChange={onChange(key)}
-        options={weights}
-      />
-    </div>
-  ))
+  return (
+    <Fragment>
+      {Object.keys(fontWeights).map(key => (
+        <div key={key}>
+          <Combobox
+            label={key}
+            name={'fontWeights.' + key}
+            value={fontWeights[key]}
+            onChange={onChange(key)}
+            options={weights}
+          />
+        </div>
+      ))}
+    </Fragment>
+  )
 }
 
 export default FontWeights

packages/editor/src/Theme/Fonts.tsx

@@ -1,6 +1,7 @@
 /** @jsx jsx */
-import * as CSS from 'csstype'
 import { jsx, useThemeUI } from 'theme-ui'
+import * as CSS from 'csstype'
+import { Fragment } from 'react'
 import Combobox from '../Combobox'
 import { EditorContextValue } from '../types'
 
@@ -39,17 +40,21 @@ const Fonts = ({ options = defaultFonts }) => {
     })
   }
 
-  return Object.keys(fonts).map(key => (
-    <div key={key}>
-      <Combobox
-        label={key}
-        name={'fonts.' + key}
-        value={fonts[key]}
-        onChange={onChange(key)}
-        options={options}
-      />
-    </div>
-  ))
+  return (
+    <Fragment>
+      {Object.keys(fonts).map(key => (
+        <div key={key}>
+          <Combobox
+            label={key}
+            name={'fonts.' + key}
+            value={fonts[key]}
+            onChange={onChange(key)}
+            options={options}
+          />
+        </div>
+      ))}
+    </Fragment>
+  )
 }
 
 export default Fonts

packages/editor/src/Theme/LineHeights.tsx

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { jsx, useThemeUI } from 'theme-ui'
+import { Fragment } from 'react'
 import { Field } from '@theme-ui/components'
 import { EditorContextValue } from '../types'
 
@@ -18,18 +19,22 @@ export default () => {
     })
   }
 
-  return Object.keys(lineHeights).map(key => (
-    <div key={key}>
-      <Field<'input'>
-        type="number"
-        label={key}
-        name={'lineHeights.' + key}
-        value={lineHeights[key]}
-        onChange={onChange(key)}
-        min={1}
-        max={3}
-        step={1 / 64}
-      />
-    </div>
-  ))
+  return (
+    <Fragment>
+      {Object.keys(lineHeights).map(key => (
+        <div key={key}>
+          <Field<'input'>
+            type="number"
+            label={key}
+            name={'lineHeights.' + key}
+            value={lineHeights[key]}
+            onChange={onChange(key)}
+            min={1}
+            max={3}
+            step={1 / 64}
+          />
+        </div>
+      ))}
+    </Fragment>
+  )
 }

packages/editor/src/Theme/Space.tsx

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { jsx, useThemeUI } from 'theme-ui'
+import { Fragment } from 'react'
 import { Field } from '@theme-ui/components'
 import { EditorContextValue } from '../types'
 
@@ -27,17 +28,21 @@ const Space = () => {
     }
   }
 
-  return Object.keys(space).map(key => (
-    <div key={key}>
-      <Field<'input'>
-        type="number"
-        label={key}
-        name={'space.' + key}
-        value={space[key]}
-        onChange={onChange(key)}
-      />
-    </div>
-  ))
+  return (
+    <Fragment>
+      {Object.keys(space).map(key => (
+        <div key={key}>
+          <Field<'input'>
+            type="number"
+            label={key}
+            name={'space.' + key}
+            value={space[key]}
+            onChange={onChange(key)}
+          />
+        </div>
+      ))}
+    </Fragment>
+  )
 }
 
 export default Space