addressed review comments (replaced <p> with <div>, moved key attribute to proper element)

src/renderer/components/+network-services/service-details.tsx

@@ -63,11 +63,10 @@ export class ServiceDetails extends React.Component<Props> {
         <DrawerItem name={<Trans>Ports</Trans>}>
           <div>
             {
-              service.getPorts().map((port) => {
+              service.getPorts().map((port) => (
-                return(
+                  <ServicePortComponent service={service} port={port} key={port.toString()}/>
-                  <ServicePortComponent service={service} port={port}/>
+                )
-                );
+              )
-              })
             }
           </div>
         </DrawerItem>

src/renderer/components/+network-services/service-port-component.tsx

@@ -35,14 +35,14 @@ export class ServicePortComponent extends React.Component<Props> {
   render() {
     const { port } = this.props;
     return (
-      <p className={cssNames("ServicePortComponent", { waiting: this.waiting })} key={port.toString()}>
+      <div className={cssNames("ServicePortComponent", { waiting: this.waiting })}>
         <span title={_i18n._(t`Open in a browser`)} onClick={() => this.portForward() }>
           {port.toString()}
           {this.waiting && (
             <Spinner />
           )}
         </span>
-      </p>
+      </div>
     );
   }
 }

src/renderer/components/+workloads-pods/pod-container-port.tsx

@@ -13,7 +13,6 @@ import { Spinner } from "../spinner"
 
 interface Props {
   pod: Pod;
-  containerName: string;
   port: {
     name?: string;
     containerPort: number;
@@ -38,19 +37,18 @@ export class PodContainerPort extends React.Component<Props> {
   }
 
   render() {
-    const { containerName, port } = this.props;
+    const { port } = this.props;
     const { name, containerPort, protocol } = port;
-    const key = `${containerName}-port-${containerPort}-${protocol}`
     const text = (name ? name + ': ' : '')+`${containerPort}/${protocol}`
     return (
-      <p className={cssNames("PodContainerPort", { waiting: this.waiting })} key={key}>
+      <div className={cssNames("PodContainerPort", { waiting: this.waiting })}>
         <span title={_i18n._(t`Open in a browser`)} onClick={() => this.portForward() }>
           {text}
           {this.waiting && (
             <Spinner />
           )}
         </span>
-      </p>
+      </div>
     )
   }
 }

src/renderer/components/+workloads-pods/pod-details-container.tsx

@@ -67,8 +67,9 @@ export class PodDetailsContainer extends React.Component<Props> {
           <div>
             {
               ports.map((port) => {
+                const key = `${container.name}-port-${port.containerPort}-${port.protocol}`
                 return(
-                  <PodContainerPort pod={pod} containerName={container.name} port={port}/>
+                  <PodContainerPort pod={pod} port={port} key={key}/>
                 )
               })
             }