From 93655d39b8d2b6b6e26114a16e8aae5285ba2f43 Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Mon, 11 Nov 2019 04:42:03 -0800
Subject: [PATCH] Fix more react warnings

Summary: Fixing random React errors as I encountered them.

Reviewed By: jknoxville

Differential Revision: D18397950

fbshipit-source-id: cb73fcd6cd9aac2cd53c982e5a58760be12a10ca
---
 src/chrome/Popover.tsx                        | 62 ++++++++++---------
 src/chrome/ShareSheetExportUrl.tsx            |  5 +-
 src/ui/components/Popover.tsx                 | 21 ++++---
 .../elements-inspector/elements.tsx           | 10 ++-
 4 files changed, 52 insertions(+), 46 deletions(-)

diff --git a/src/chrome/Popover.tsx b/src/chrome/Popover.tsx
index 5bcd80a5c..b323a4a4c 100644
--- a/src/chrome/Popover.tsx
+++ b/src/chrome/Popover.tsx
@@ -163,35 +163,37 @@ export default class Popover extends PureComponent<Props> {
   };
 
   render() {
-    return [
-      <Anchor src="./anchor.svg" key="anchor" />,
-      <PopoverContainer innerRef={this._setRef} key="popup">
-        {this.props.sections.map(section => {
-          if (section.items.length > 0) {
-            return (
-              <Section key={section.title}>
-                <Heading>{section.title}</Heading>
-                {section.items.map(item => (
-                  <PopoverItem key={item.title}>
-                    <ItemImage>{item.icon}</ItemImage>
-                    <ItemContent>
-                      <ItemTitle>{item.title}</ItemTitle>
-                      <ItemSubtitle>{item.subtitle}</ItemSubtitle>
-                    </ItemContent>
-                    {item.onClick && (
-                      <Action onClick={item.onClick} compact={true}>
-                        Run
-                      </Action>
-                    )}
-                  </PopoverItem>
-                ))}
-              </Section>
-            );
-          } else {
-            return null;
-          }
-        })}
-      </PopoverContainer>,
-    ];
+    return (
+      <>
+        <Anchor src="./anchor.svg" key="anchor" />
+        <PopoverContainer innerRef={this._setRef} key="popup">
+          {this.props.sections.map(section => {
+            if (section.items.length > 0) {
+              return (
+                <Section key={section.title}>
+                  <Heading>{section.title}</Heading>
+                  {section.items.map(item => (
+                    <PopoverItem key={item.title}>
+                      <ItemImage>{item.icon}</ItemImage>
+                      <ItemContent>
+                        <ItemTitle>{item.title}</ItemTitle>
+                        <ItemSubtitle>{item.subtitle}</ItemSubtitle>
+                      </ItemContent>
+                      {item.onClick && (
+                        <Action onClick={item.onClick} compact={true}>
+                          Run
+                        </Action>
+                      )}
+                    </PopoverItem>
+                  ))}
+                </Section>
+              );
+            } else {
+              return null;
+            }
+          })}
+        </PopoverContainer>
+      </>
+    );
   }
 }
diff --git a/src/chrome/ShareSheetExportUrl.tsx b/src/chrome/ShareSheetExportUrl.tsx
index cace9053f..ce0928999 100644
--- a/src/chrome/ShareSheetExportUrl.tsx
+++ b/src/chrome/ShareSheetExportUrl.tsx
@@ -228,7 +228,10 @@ export default class ShareSheetExportUrl extends Component<Props, State> {
                       used to share with other Flipper users. Opening it will
                       import the data from your trace.
                     </InfoText>
-                    <Copy value={(result as DataExportResult).flipperUrl} />
+                    <Copy
+                      value={(result as DataExportResult).flipperUrl}
+                      readOnly
+                    />
                     <InfoText>
                       When sharing your Flipper link, consider that the captured
                       data might contain sensitve information like access tokens
diff --git a/src/ui/components/Popover.tsx b/src/ui/components/Popover.tsx
index 460102b53..db0dd72e7 100644
--- a/src/ui/components/Popover.tsx
+++ b/src/ui/components/Popover.tsx
@@ -93,14 +93,17 @@ export default class Popover extends PureComponent<Props> {
   };
 
   render() {
-    return [
-      <Anchor src="./anchor.svg" key="anchor" />,
-      <PopoverContainer
-        innerRef={this._setRef}
-        key="popup"
-        opts={this.props.forceOpts || {}}>
-        {this.props.children}
-      </PopoverContainer>,
-    ];
+    return (
+      <>
+        <Anchor src="./anchor.svg" key="anchor" />
+        <PopoverContainer
+          innerRef={this._setRef}
+          key="popup"
+          opts={this.props.forceOpts || {}}>
+          {this.props.children}
+        </PopoverContainer>
+        ,
+      </>
+    );
   }
 }
diff --git a/src/ui/components/elements-inspector/elements.tsx b/src/ui/components/elements-inspector/elements.tsx
index 4c05e7b46..bb4119329 100644
--- a/src/ui/components/elements-inspector/elements.tsx
+++ b/src/ui/components/elements-inspector/elements.tsx
@@ -134,7 +134,6 @@ class PartialHighlight extends PureComponent<{
 
   render() {
     const {highlighted, content, selected} = this.props;
-    let renderedValue;
     if (
       content &&
       highlighted != null &&
@@ -148,19 +147,18 @@ class PartialHighlight extends PureComponent<{
       const before = content.substring(0, highlightStart);
       const match = content.substring(highlightStart, highlightEnd);
       const after = content.substring(highlightEnd);
-      renderedValue = [
+      return (
         <span>
           {before}
           <PartialHighlight.HighlightedText selected={selected}>
             {match}
           </PartialHighlight.HighlightedText>
           {after}
-        </span>,
-      ];
+        </span>
+      );
     } else {
-      renderedValue = <span>{content}</span>;
+      return <span>{content}</span>;
     }
-    return renderedValue;
   }
 }