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

@@ -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}

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);

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}