Use fragments instead of arrays when returning elements

Summary: Returning arrays from render kills react-reconciliation and produces missing key warnings. Turned all array rendering methods to use Fragments, where I could find them.

Reviewed By: jknoxville

Differential Revision: D21178253

fbshipit-source-id: 85ddf8adfa79732ccbe68409fdcf150399455983

desktop/app/src/plugins/TableNativePlugin.tsx

@@ -188,20 +188,22 @@ function renderToolbar(section: ToolbarSection) {
           </Button>
         );
       case 'input':
-        return [
-          <Label>{item.label}</Label>,
-          <Select
-            options={item.options.reduce(
-              (obj: {[key: string]: string}, item) => {
-                obj[item] = item;
-                return obj;
-              },
-              {},
-            )}
-            selected={item.value}
-            onChange={() => {}}
-          />,
-        ];
+        return (
+          <>
+            <Label>{item.label}</Label>
+            <Select
+              options={item.options.reduce(
+                (obj: {[key: string]: string}, item) => {
+                  obj[item] = item;
+                  return obj;
+                },
+                {},
+              )}
+              selected={item.value}
+              onChange={() => {}}
+            />
+          </>
+        );
     }
   });
   return (

desktop/app/src/ui/components/data-inspector/DataDescription.tsx

@@ -566,12 +566,17 @@ class DataDescriptionContainer extends Component<{
           return <UndefinedValue>(not set)</UndefinedValue>;
         } else if (colorInfo) {
           const {a, b, g, r} = colorInfo;
-          return [
-            <ColorBox key="color-box" color={`rgba(${r}, ${g}, ${b}, ${a})`} />,
-            <ColorValue key="value">
-              rgba({r}, {g}, {b}, {a === 1 ? '1' : a.toFixed(2)})
-            </ColorValue>,
-          ];
+          return (
+            <>
+              <ColorBox
+                key="color-box"
+                color={`rgba(${r}, ${g}, ${b}, ${a})`}
+              />
+              <ColorValue key="value">
+                rgba({r}, {g}, {b}, {a === 1 ? '1' : a.toFixed(2)})
+              </ColorValue>
+            </>
+          );
         } else {
           return <span>Malformed color</span>;
         }
@@ -583,12 +588,17 @@ class DataDescriptionContainer extends Component<{
           return <UndefinedValue>(not set)</UndefinedValue>;
         } else if (colorInfo) {
           const {a, b, g, r} = colorInfo;
-          return [
-            <ColorBox key="color-box" color={`rgba(${r}, ${g}, ${b}, ${a})`} />,
-            <ColorValue key="value">
-              rgba({r}, {g}, {b}, {a === 1 ? '1' : a.toFixed(2)})
-            </ColorValue>,
-          ];
+          return (
+            <>
+              <ColorBox
+                key="color-box"
+                color={`rgba(${r}, ${g}, ${b}, ${a})`}
+              />
+              <ColorValue key="value">
+                rgba({r}, {g}, {b}, {a === 1 ? '1' : a.toFixed(2)})
+              </ColorValue>
+            </>
+          );
         } else {
           return <span>Malformed color</span>;
         }

desktop/app/src/ui/components/searchable/Searchable.tsx

@@ -22,7 +22,7 @@ import styled from '@emotion/styled';
 import debounce from 'lodash.debounce';
 import ToggleButton from '../ToggleSwitch';
 import React from 'react';
-import VerticalContainer from '../Layout';
+import Layout from '../Layout';
 
 const SearchBar = styled(Toolbar)({
   height: 42,
@@ -466,7 +466,7 @@ const Searchable = (
     render() {
       const {placeholder, actions, ...props} = this.props;
       return (
-        <VerticalContainer scrollable>
+        <Layout>
           <SearchBar position="top" key="searchbar">
             <SearchBox tabIndex={-1}>
               <SearchIcon
@@ -534,7 +534,7 @@ const Searchable = (
             bodySearchEnabled={this.state.bodySearchEnabled}
             filters={this.state.filters}
           />
-        </VerticalContainer>
+        </Layout>
       );
     }
   };