add key

src/components/snake/index.tsx

@@ -13,9 +13,9 @@ function tableHead(...cols: (string | number)[]) {
     const elements = cols.map((col, idx) => <th key={idx}>{col}</th>);
     return <tr>{elements}</tr>;
 }
-function tableRow(...cols: (string | number)[]) {
+function tableRow(key: number, ...cols: (string | number)[]) {
     const elements = cols.map((col, idx) => <td key={idx}>{col}</td>);
-    return <tr>{elements}</tr>;
+    return <tr key={key}>{elements}</tr>;
 }
 
 const SnakePage: FC = () => {
@@ -46,7 +46,7 @@ const SnakePage: FC = () => {
 
     const labSnapsTRs = useMemo(
         () =>
-            snaps.map(snap => {
+            snaps.map((snap, idx) => {
                 const labsRanked = snap.labs.sort((a, b) => a.snakeLength - b.snakeLength);
                 const avgLen = labsRanked.reduce((prev, curr) => prev + curr.snakeLength, 0) / labsRanked.length;
 
@@ -59,7 +59,19 @@ const SnakePage: FC = () => {
                 const q95Len = labsRanked[Math.floor(labsRanked.length * 0.95)]!.snakeLength;
                 const maxLen = Math.max(...labsRanked.map(lab => lab.snakeLength));
 
-                return tableRow(snap.iteration, avgLen, minLen, q20Len, q40Len, q60Len, q80Len, q90Len, q95Len, maxLen);
+                return tableRow(
+                    idx,
+                    snap.iteration,
+                    avgLen,
+                    minLen,
+                    q20Len,
+                    q40Len,
+                    q60Len,
+                    q80Len,
+                    q90Len,
+                    q95Len,
+                    maxLen,
+                );
             }),
         [snaps],
     );
@@ -70,8 +82,8 @@ const SnakePage: FC = () => {
                 <canvas id="board" ref={boardRef} width={BOARD_SIZE} height={BOARD_SIZE} />
                 <div className="table-container">
                     <table id="snaps">
-                        {tableHead('Itr', 'Avg', 'Min', '20%', '40%', '60%', '80%', '90%', '95%', 'Max')}
-                        {labSnapsTRs}
+                        <thead>{tableHead('Itr', 'Avg', 'Min', '20%', '40%', '60%', '80%', '90%', '95%', 'Max')}</thead>
+                        <tbody>{labSnapsTRs}</tbody>
                     </table>
                 </div>
             </div>