Update WeightConverter2 so that it actually works

own-react-experiments/src/pages/UnitConverterPage/WeightConverter2.tsx

@@ -2,29 +2,41 @@ import { TextField, Typography } from "@mui/material";
 import React, { useState } from "react";
 
 function WeightConverter2() {
-  const [kg_str, setKg_str] = useState<string>("0");
-  const [g_str, setG_str] = useState<string>("0");
-  const [lbs_str, setLbs_str] = useState<string>("0");
-  const [kg, setKg] = useState<number>(0);
+  const [kilos, setKilos] = useState<string>("0");
+  const [grams, setGrams] = useState<string>("0");
+  const [pounds, setPounds] = useState<string>("0");
 
-  console.debug("WeightConverter rerender! kg: " + kg_str);
+  console.debug("WeightConverter rerender! kg: " + kilos);
 
   function update_kg(val: string) {
-    setKg_str(val);
-    const numval = Number(val);
-    if (isNaN(numval)) return;
+    setKilos(val);
+    if (validateInput(val)) {
+      const num = Number(val);
+      setGrams((num * 1000).toString());
+      setPounds((num * 2.20462).toString());
+    }
   }
 
   function updateG(val: string) {
-    setG_str(val);
-    const numval = Number(val);
-    if (isNaN(numval)) return;
+    setGrams(val);
+    if (validateInput(val)) {
+      const num = Number(val);
+      setKilos((num / 1000).toString());
+      setPounds((num * 0.00220462).toString());
+    }
   }
 
   function update_lbs(val: string) {
-    setLbs_str(val);
-    const numval = Number(val);
-    if (isNaN(numval)) return;
+    setPounds(val);
+    if (validateInput(val)) {
+      const num = Number(val);
+      setKilos((num / 2.20462).toString());
+      setGrams((num / 2204.62).toString());
+    }
+  }
+
+  function validateInput(val: string) {
+    return !isNaN(Number(val));
   }
 
   return (
@@ -33,19 +45,22 @@ function WeightConverter2() {
       <TextField
         label="kg"
         helperText="Weight in kg"
-        value={kg_str}
+        value={kilos}
+        error={!validateInput(kilos)}
         onChange={(e) => update_kg(e.target.value)}
       />
       <TextField
         label="g"
         helperText="Weight in g"
-        value={g_str}
+        value={grams}
+        error={!validateInput(grams)}
         onChange={(e) => updateG(e.target.value)}
       />
       <TextField
         label="lbs"
         helperText="Weight in lbs"
-        value={lbs_str}
+        value={pounds}
+        error={!validateInput(pounds)}
         onChange={(e) => update_lbs(e.target.value)}
       />
     </>