u_key fuer react key

.gitignore

@@ -2,6 +2,7 @@
 
 # dependencies
 /node_modules
+**/node_modules
 /.pnp
 .pnp.js
 
@@ -17,6 +18,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+/.metadata
 
 npm-debug.log*
 yarn-debug.log*

defs/IFlights.ts

@@ -117,7 +117,7 @@ export class CFlightsProxy {
   public readonly success: boolean;
   public readonly message: string;
   public readonly meta: MetaProxy;
-  public readonly data: IFlightProxy[] | null;
+  public readonly data: CFlightProxy[] | null;
   public static Parse(d: string): CFlightsProxy {
     return CFlightsProxy.Create(JSON.parse(d));
   }

src/App.tsx

@@ -6,7 +6,6 @@ import {groupByMap} from './global/tools';
 import flights from './data/HoPe_all_flights.json';
 import {CFlight} from './classes/CFlight';
 import {CSeason} from './classes/CSeason';
-import {CheckArray} from './tools/tools';
 
 const data_raw = flights.data;
 const data: CFlight[] = [];
@@ -16,7 +15,6 @@ for (let fl of data_raw)
 {
   data.push(new CFlight(fl));
 }
-CheckArray(data);
 
 const seasondata_raw = groupByMap(data, i => i.FKSeason);
 

src/components/FlightsTable.tsx

@@ -3,20 +3,20 @@ import SortableTable from "./SortableTable";
 import {THeader} from "./SortableTable";
 import {CFlight} from '../classes/CFlight';
 
-function Link2Flight(key: string, row: any, data: string | null)
+function Link2Flight(u_key: string, key: string, row: any, data: string | null)
 {
   var val: JSX.Element = <></>;
   const link: string = 'https://de.dhv-xc.de/flight/' + row['IDFlight'];
-  val = <td><a href={link} target="_blank" rel="noopener noreferrer" >{data}</a></td>;
+  val = <td key={u_key}><a href={link} target="_blank" rel="noopener noreferrer" >{data}</a></td>;
 
   return val;
 }
 
-function Meter2Km(key: string, row: any, data: string | null)
+function Meter2Km(u_key: string, key: string, row: any, data: string | null)
 {
   var val: JSX.Element = <></>;
   const numdata: number = +data! / 1000;
-  val = <td>{numdata}</td>;
+  val = <td key={u_key}>{numdata}</td>;
 
   return val;
 }

src/components/SortableTable.tsx

@@ -3,7 +3,7 @@ import { orderBy } from 'natural-orderby';
 import { MouseEventHandler, useState } from "react";
 import { IKey } from "../interfaces/IKey";
 
-export interface ITableTdCallback {(key: string, row: any, data: string | null): JSX.Element};
+export interface ITableTdCallback {(u_key: string, key: string, row: any, data: string | null): JSX.Element};
 export type THeader = { key: string; label: string; visible?: boolean; callback?: ITableTdCallback };
 
 type TSortOrder = "ascn" | "desc";
@@ -73,19 +73,19 @@ export default function SortableTable<T extends IKey>({ headers, dataTbl }:
     return reval;
   }
 
-  function TableTd({ item, key, row_item, data } 
+  function TableTd({ item, u_key, row_item, data } 
-    : {item: THeader, key: number, row_item: T, data: string | null})
+    : {item: THeader, u_key: string, row_item: T, data: string | null})
   {
     var val_complete: JSX.Element = <></>;
     if(item.visible === undefined || item.visible === true)
     {
       if(item.callback)
       {
-        val_complete = item.callback(item.key, row_item, data);
+        val_complete = item.callback(u_key, item.key, row_item, data);
       }
       else
       {
-        val_complete = (<td key={key}>{data}</td>);
+        val_complete = (<td key={u_key}>{data}</td>);
       }
     }
     return val_complete;
@@ -95,7 +95,7 @@ export default function SortableTable<T extends IKey>({ headers, dataTbl }:
     {headers, row_item}: 
     { 
       headers: THeader[], 
-      row_item: any
+      row_item: T
     })
   {
     return(
@@ -104,7 +104,8 @@ export default function SortableTable<T extends IKey>({ headers, dataTbl }:
         headers.map((h_item, key) => 
         {
           var c: any = row_item; // workaround TS2322 TS7053
-          return ( <TableTd item={h_item} key={key} row_item={row_item} data={c[h_item.key]}></TableTd> );
+          var unique_key: string = row_item.key + "_" + key; 
+          return ( <TableTd item={h_item} u_key={unique_key} row_item={row_item} data={c[h_item.key]}></TableTd> );
         })
       }
       </tr>
@@ -117,9 +118,8 @@ export default function SortableTable<T extends IKey>({ headers, dataTbl }:
 
     for(var flight of tableDataSorted)
     {
-      var index: number = flight.key;
       body.push(
-        <TableTr headers={headers} key={index} row_item = {flight} />
+        <TableTr headers={headers} row_item = {flight} />
         );
     }