Add missing keys to list components.

client/src/api/tgo.ts

@@ -8,6 +8,7 @@ export enum TgoType {
 }
 
 export interface Tgo {
+  id: string;
   name: string;
   control_point_name: string;
   category: string;

client/src/components/airdefenserangelayer/AirDefenseRangeLayer.tsx

@@ -26,9 +26,10 @@ const TgoRangeCircles = (props: TgoRangeCirclesProps) => {
 
   return (
     <>
-      {radii.map((radius) => {
+      {radii.map((radius, idx) => {
         return (
           <Circle
+            key={idx}
             center={props.tgo.position}
             radius={radius}
             color={color}
@@ -61,7 +62,9 @@ export const AirDefenseRangeLayer = (props: AirDefenseRangeLayerProps) => {
   return (
     <LayerGroup>
       {allTgos.map((tgo) => {
-        return <TgoRangeCircles tgo={tgo} {...props}></TgoRangeCircles>;
+        return (
+          <TgoRangeCircles key={tgo.id} tgo={tgo} {...props}></TgoRangeCircles>
+        );
       })}
     </LayerGroup>
   );

client/src/components/liberationmap/LiberationMap.tsx

@@ -33,9 +33,9 @@ export default function LiberationMap(props: GameProps) {
         <LayersControl.Overlay name="Control points" checked>
           <ControlPointsLayer />
         </LayersControl.Overlay>
-        {Object.values(TgoType).map((type) => {
+        {Object.values(TgoType).map((type, idx) => {
           return (
-            <LayersControl.Overlay name={type} checked>
+            <LayersControl.Overlay key={idx} name={type} checked>
               <TgosLayer type={type as TgoType} />
             </LayersControl.Overlay>
           );

client/src/components/splitlines/SplitLines.tsx

@@ -1,3 +1,5 @@
+import { Fragment } from "react";
+
 interface SplitLinesProps {
   items: string[];
 }
@@ -5,12 +7,12 @@ interface SplitLinesProps {
 const SplitLines = (props: SplitLinesProps) => {
   return (
     <>
-      {props.items.map((text) => {
+      {props.items.map((text, idx) => {
         return (
-          <>
+          <Fragment key={idx}>
             {text}
             <br />
-          </>
+          </Fragment>
         );
       })}
     </>

client/src/components/tgos/Tgo.tsx

@@ -2,6 +2,7 @@ import { Icon, Point } from "leaflet";
 import { Marker, Tooltip } from "react-leaflet";
 
 import { Symbol as MilSymbol } from "milsymbol";
+import SplitLines from "../splitlines/SplitLines";
 import { Tgo as TgoModel } from "../../api/tgo";
 
 function iconForTgo(cp: TgoModel) {
@@ -25,12 +26,7 @@ export default function Tgo(props: TgoProps) {
       <Tooltip>
         {`${props.tgo.name} (${props.tgo.control_point_name})`}
         <br />
-        {props.tgo.units.map((unit) => (
-          <>
-            {unit}
-            <br />
-          </>
-        ))}
+        <SplitLines items={props.tgo.units} />
       </Tooltip>
     </Marker>
   );