From 9a8e267f2a189a5313ae87ab348a16cc3eabfc2f Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Fri, 8 Nov 2019 04:34:34 -0800
Subject: [PATCH] Fixed React key warnings in Layout inspector

Summary: Fixed some React key warnings

Reviewed By: passy

Differential Revision: D18394993

fbshipit-source-id: 804b8e2cb8525253e2ef8120b621dcb98af0e3e5
---
 src/plugins/sections/DetailsPanel.js            | 17 ++++++++++++++---
 .../components/data-inspector/DataInspector.tsx |  6 ++++--
 .../components/elements-inspector/elements.tsx  |  1 +
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/plugins/sections/DetailsPanel.js b/src/plugins/sections/DetailsPanel.js
index 02ee447c8..23c871399 100644
--- a/src/plugins/sections/DetailsPanel.js
+++ b/src/plugins/sections/DetailsPanel.js
@@ -50,6 +50,7 @@ export default class DetailsPanel extends Component<Props> {
       <React.Fragment>
         {eventUserInfo && (
           <Panel
+            key="eventUserInfo"
             collapsable={false}
             floating={false}
             heading={'Event User Info'}>
@@ -57,7 +58,11 @@ export default class DetailsPanel extends Component<Props> {
           </Panel>
         )}
         {changeSets && changeSets.length > 0 ? (
-          <Panel collapsable={false} floating={false} heading={'Changesets'}>
+          <Panel
+            key="Changesets"
+            collapsable={false}
+            floating={false}
+            heading={'Changesets'}>
             <MarkerTimeline
               points={changeSets.map(p => ({
                 label:
@@ -79,7 +84,10 @@ export default class DetailsPanel extends Component<Props> {
           <NoContent>No changes sets available</NoContent>
         )}
         {this.props.focusedChangeSet && (
-          <Panel floating={false} heading="Changeset Details">
+          <Panel
+            key="Changeset Details"
+            floating={false}
+            heading="Changeset Details">
             <ManagedDataInspector
               data={this.props.focusedChangeSet.changeset}
               expandRoot={true}
@@ -87,7 +95,10 @@ export default class DetailsPanel extends Component<Props> {
           </Panel>
         )}
         {this.props.selectedNodeInfo && (
-          <Panel floating={false} heading="Selected Node Info">
+          <Panel
+            key="Selected Node Info"
+            floating={false}
+            heading="Selected Node Info">
             <ManagedDataInspector
               data={this.props.selectedNodeInfo}
               expandRoot={true}
diff --git a/src/ui/components/data-inspector/DataInspector.tsx b/src/ui/components/data-inspector/DataInspector.tsx
index 018765bc1..d49bdc3a0 100644
--- a/src/ui/components/data-inspector/DataInspector.tsx
+++ b/src/ui/components/data-inspector/DataInspector.tsx
@@ -525,10 +525,12 @@ export default class DataInspector extends Component<DataInspectorProps> {
 
           switch (metadata.status) {
             case 'added':
-              propertyNodes.push(<Added>{dataInspectorNode}</Added>);
+              propertyNodes.push(<Added key={key}>{dataInspectorNode}</Added>);
               break;
             case 'removed':
-              propertyNodes.push(<Removed>{dataInspectorNode}</Removed>);
+              propertyNodes.push(
+                <Removed key={key}>{dataInspectorNode}</Removed>,
+              );
               break;
             default:
               propertyNodes.push(dataInspectorNode);
diff --git a/src/ui/components/elements-inspector/elements.tsx b/src/ui/components/elements-inspector/elements.tsx
index 25a1cd148..4c05e7b46 100644
--- a/src/ui/components/elements-inspector/elements.tsx
+++ b/src/ui/components/elements-inspector/elements.tsx
@@ -326,6 +326,7 @@ class ElementsRow extends PureComponent<ElementsRowProps, ElementsRowState> {
     const attributes = element.attributes
       ? element.attributes.map(attr => (
           <ElementsRowAttribute
+            key={attr.name}
             name={attr.name}
             value={attr.value}
             matchingSearchQuery={matchingSearchQuery}