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,8 +188,9 @@ function renderToolbar(section: ToolbarSection) {
           </Button>
         );
       case 'input':
-        return [
+        return (
-          <Label>{item.label}</Label>,
+          <>
+            <Label>{item.label}</Label>
             <Select
               options={item.options.reduce(
                 (obj: {[key: string]: string}, item) => {
@@ -200,8 +201,9 @@ function renderToolbar(section: ToolbarSection) {
               )}
               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 [
+          return (
-            <ColorBox key="color-box" color={`rgba(${r}, ${g}, ${b}, ${a})`} />,
+            <>
+              <ColorBox
+                key="color-box"
+                color={`rgba(${r}, ${g}, ${b}, ${a})`}
+              />
               <ColorValue key="value">
                 rgba({r}, {g}, {b}, {a === 1 ? '1' : a.toFixed(2)})
-            </ColorValue>,
+              </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 [
+          return (
-            <ColorBox key="color-box" color={`rgba(${r}, ${g}, ${b}, ${a})`} />,
+            <>
+              <ColorBox
+                key="color-box"
+                color={`rgba(${r}, ${g}, ${b}, ${a})`}
+              />
               <ColorValue key="value">
                 rgba({r}, {g}, {b}, {a === 1 ? '1' : a.toFixed(2)})
-            </ColorValue>,
+              </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>
       );
     }
   };

desktop/plugins/databases/index.js

@@ -1038,10 +1038,12 @@ export default class DatabasesPlugin extends FlipperPlugin<
   };
 
   renderStructure() {
-    return [
+    return (
-      renderDatabaseColumns(this.state.currentStructure),
+      <>
-      renderDatabaseIndexes(this.state.currentStructure),
+        {renderDatabaseColumns(this.state.currentStructure)}
-    ];
+        {renderDatabaseIndexes(this.state.currentStructure)}
+      </>
+    );
   }
 
   renderSidebar = (table: QueriedTable) => {

desktop/plugins/fresco/ImagesCacheOverview.tsx

@@ -299,13 +299,14 @@ class ImageGrid extends PureComponent<{
       return null;
     }
 
-    return [
+    return (
+      <>
         <ImageGridHeader
           key="header"
           title={this.props.title}
           subtitle={this.props.subtitle}
           onClear={this.props.onClear}
-      />,
+        />
         <ImageGrid.Content key="content">
           {images.map((imageId) => (
             <ImageItem
@@ -321,8 +322,9 @@ class ImageGrid extends PureComponent<{
               }
             />
           ))}
-      </ImageGrid.Content>,
+        </ImageGrid.Content>
-    ];
+      </>
+    );
   }
 }