From f07d898a35ec63ca8b51fc5e39bd0088ff740c4e Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Thu, 23 Apr 2020 03:45:43 -0700
Subject: [PATCH] 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 | 30 +++++------
 .../data-inspector/DataDescription.tsx        | 34 ++++++++-----
 .../ui/components/searchable/Searchable.tsx   |  6 +--
 desktop/plugins/databases/index.js            | 10 ++--
 .../plugins/fresco/ImagesCacheOverview.tsx    | 50 ++++++++++---------
 5 files changed, 73 insertions(+), 57 deletions(-)

diff --git a/desktop/app/src/plugins/TableNativePlugin.tsx b/desktop/app/src/plugins/TableNativePlugin.tsx
index d90650a7f..588eef420 100644
--- a/desktop/app/src/plugins/TableNativePlugin.tsx
+++ b/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 (
diff --git a/desktop/app/src/ui/components/data-inspector/DataDescription.tsx b/desktop/app/src/ui/components/data-inspector/DataDescription.tsx
index 381755bf2..38ca2fd0e 100644
--- a/desktop/app/src/ui/components/data-inspector/DataDescription.tsx
+++ b/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>;
         }
diff --git a/desktop/app/src/ui/components/searchable/Searchable.tsx b/desktop/app/src/ui/components/searchable/Searchable.tsx
index cd98f6f39..9da5e2789 100644
--- a/desktop/app/src/ui/components/searchable/Searchable.tsx
+++ b/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>
       );
     }
   };
diff --git a/desktop/plugins/databases/index.js b/desktop/plugins/databases/index.js
index 3e2e5099f..dd06aa9b3 100644
--- a/desktop/plugins/databases/index.js
+++ b/desktop/plugins/databases/index.js
@@ -1038,10 +1038,12 @@ export default class DatabasesPlugin extends FlipperPlugin<
   };
 
   renderStructure() {
-    return [
-      renderDatabaseColumns(this.state.currentStructure),
-      renderDatabaseIndexes(this.state.currentStructure),
-    ];
+    return (
+      <>
+        {renderDatabaseColumns(this.state.currentStructure)}
+        {renderDatabaseIndexes(this.state.currentStructure)}
+      </>
+    );
   }
 
   renderSidebar = (table: QueriedTable) => {
diff --git a/desktop/plugins/fresco/ImagesCacheOverview.tsx b/desktop/plugins/fresco/ImagesCacheOverview.tsx
index fdf4c975c..82078451c 100644
--- a/desktop/plugins/fresco/ImagesCacheOverview.tsx
+++ b/desktop/plugins/fresco/ImagesCacheOverview.tsx
@@ -299,30 +299,32 @@ class ImageGrid extends PureComponent<{
       return null;
     }
 
-    return [
-      <ImageGridHeader
-        key="header"
-        title={this.props.title}
-        subtitle={this.props.subtitle}
-        onClear={this.props.onClear}
-      />,
-      <ImageGrid.Content key="content">
-        {images.map((imageId) => (
-          <ImageItem
-            imageId={imageId}
-            image={this.props.imagesMap[imageId]}
-            key={imageId}
-            selected={selectedImage != null && selectedImage === imageId}
-            onSelected={onImageSelected}
-            size={this.props.size}
-            numberOfRequests={
-              this.props.events.filter((e) => e.imageIds.includes(imageId))
-                .length
-            }
-          />
-        ))}
-      </ImageGrid.Content>,
-    ];
+    return (
+      <>
+        <ImageGridHeader
+          key="header"
+          title={this.props.title}
+          subtitle={this.props.subtitle}
+          onClear={this.props.onClear}
+        />
+        <ImageGrid.Content key="content">
+          {images.map((imageId) => (
+            <ImageItem
+              imageId={imageId}
+              image={this.props.imagesMap[imageId]}
+              key={imageId}
+              selected={selectedImage != null && selectedImage === imageId}
+              onSelected={onImageSelected}
+              size={this.props.size}
+              numberOfRequests={
+                this.props.events.filter((e) => e.imageIds.includes(imageId))
+                  .length
+              }
+            />
+          ))}
+        </ImageGrid.Content>
+      </>
+    );
   }
 }