dynammically pass random numbers to data grid

src/components/RandomNumber.tsx

@@ -3,26 +3,33 @@ import { useEffect, useState } from "react";
 
 const numberOfElements = 10;
 
-function RandomNumber() {
+interface RandomNumberProps {
+  onUpdateVector: (newVec: number[]) => void;
+}
+
+function RandomNumber({ onUpdateVector }: RandomNumberProps) {
     let [vec, setVec] = useState([0]);
 
     useEffect(() => {
         let unsubscribe = listen<number>("random-integer", (event) => {
-
             let newVec = vec.slice(0, numberOfElements - 1);
             newVec.unshift(event.payload)
-
             setVec(newVec);
+            onUpdateVector(newVec);
         });
         // the lambda returned will be executed on cleanup of the effect.
         return () => {
             unsubscribe.then(f => f());
         };
-    });
+    }, [onUpdateVector, vec]);
 
-    return <ul>
-        {vec.map((number) => <li> {number}</li>)}
-     </ul>
+    return (
+      <ul>
+        {vec.map((number, index) => (
+          <li key={index}>{number}</li>
+        ))}
+      </ul>
+    );
 }
 
 export default RandomNumber;

src/components/TraceGrid.tsx

@@ -1,17 +1,21 @@
 import { DataGrid, GridRowsProp, GridColDef } from '@mui/x-data-grid';
 
-const rows: GridRowsProp = [
-  { id: 1, col1: 'Hello', col2: 'World' },
-  { id: 2, col1: 'DataGridPro', col2: 'is Awesome' },
-  { id: 3, col1: 'MUI', col2: 'is Amazing' },
-];
-
+interface TracePanelProps {
+    data: number[];
+}
+
 const columns: GridColDef[] = [
-  { field: 'col1', headerName: 'Column 1', width: 150 },
-  { field: 'col2', headerName: 'Column 2', width: 150 },
+    { field: 'id', headerName: 'ID', width: 70 },
+    { field: 'col1', headerName: 'Random Number', width: 150 },
 ];
 
-function TraceGrid() {
+function TraceGrid({ data }: TracePanelProps) {
+    // Create rows dynamically based on the provided data
+  const rows: GridRowsProp = data.map((number, index) => ({
+    id: index + 1,
+    col1: number,
+  }));
+
   return (
     <div style={{ height: 300, width: '100%' }}>
       <DataGrid rows={rows} columns={columns} />

src/pages/DebugPanel.tsx

@@ -4,13 +4,21 @@ import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import { TreeView } from '@mui/x-tree-view/TreeView';
 import { TreeItem } from '@mui/x-tree-view/TreeItem';
 import TraceGrid from "../components/TraceGrid";
+import { useState } from "react";
 
 function DebugPanel() {
+
+    const [randomNumbers, setRandomNumbers] = useState<number[]>([]);
+
+    const updateRandomNumbers = (newVec: number[]) => {
+      setRandomNumbers(newVec);
+    };
+
     return (
         <>
             <FirstComponent/> 
-            <RandomNumber/> 
-            <TraceGrid />
+            <RandomNumber onUpdateVector={updateRandomNumbers} /> 
+            <TraceGrid data={randomNumbers}/>
         </>
     );
 };