Add missing keys to list components.

This commit is contained in:
Dan Albert 2022-03-03 21:51:47 -08:00
parent c5c596dc2f
commit 4539e91fa9
5 changed files with 15 additions and 13 deletions

View File

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

View File

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

View File

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

View File

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

View File

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