auto update robot picture every 500ms

scoutingapp/src/components/img/RobotImage.tsx

@@ -1,5 +1,6 @@
-import React from "react"
+import React, {useEffect, useState} from "react"
 import { ComponentSetup } from "../interface"
+import QRCode from "react-qr-code";
 
 export const emptyImage = <img
   style={{width: "80%", height: "80%", alignItems: 'center', justifyContent: 'center'}}
@@ -8,6 +9,7 @@ export const emptyImage = <img
 />
 
 export function RobotImage(props: ComponentSetup) {
+  const [componentInside, setComponentInside] = useState(<></>)
   const robotNumber = props.getValue["TeamNumber"]
 
   const makeAltText = (robotNumber: string) => {
@@ -18,11 +20,20 @@ export function RobotImage(props: ComponentSetup) {
     }
   }
 
-  return (
-    <img
-      style={{ height: "60%", alignItems: 'center', justifyContent: 'center', margin: "auto" }}
-      src={`./src/components/img/${robotNumber}.png`}
-      alt={makeAltText(robotNumber)}
-    />
-  )
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setComponentInside(
+        <img
+          style={{height: "60%", alignItems: 'center', justifyContent: 'center', margin: "auto"}}
+          src={`./src/components/img/${robotNumber}.png`}
+          alt={makeAltText(robotNumber)}
+        />
+      )
+    }, 500);
+    return () => clearInterval(interval);
+  })
+
+  return (<>
+    {componentInside}
+  </>)
 }