Added value reporting and fixed a cycle error

components/InputTableField/index.tsx

@@ -13,15 +13,21 @@ interface Props {
   imageAlt?: string
   imageClass?: string
   imageSrc?: string[]
+  onValueChange: (value: number) => void
 }
 
 const InputTableField = (props: Props) => {
   const [value, setValue] = useState(0)
 
   useEffect(() => {
-    if (props.value) setValue(props.value)
+    if (props.value !== undefined && props.value !== value)
+      setValue(props.value)
   }, [props.value])
 
+  useEffect(() => {
+    props.onValueChange(value)
+  }, [value])
+
   function onInputChange(event: React.ChangeEvent<HTMLInputElement>) {
     setValue(parseInt(event.currentTarget?.value))
   }

components/SliderTableField/index.tsx

@@ -9,7 +9,7 @@ interface Props {
   name: string
   label: string
   description?: string
-  value?: number
+  value: number
   className?: string
   imageAlt?: string
   imageClass?: string
@@ -17,15 +17,21 @@ interface Props {
   min: number
   max: number
   step: number
+  onValueChange: (value: number) => void
 }
 
 const SliderTableField = (props: Props) => {
   const [value, setValue] = useState(0)
 
   useEffect(() => {
-    if (props.value) setValue(props.value)
+    if (props.value !== undefined && props.value !== value)
+      setValue(props.value)
   }, [props.value])
 
+  useEffect(() => {
+    props.onValueChange(value)
+  }, [value])
+
   function onInputChange(event: React.ChangeEvent<HTMLInputElement>) {
     setValue(parseInt(event.currentTarget?.value))
   }

components/SwitchTableField/index.tsx

@@ -8,20 +8,25 @@ interface Props {
   name: string
   label: string
   description?: string
-  value?: boolean
+  value: boolean
   className?: string
   imageAlt?: string
   imageClass?: string
   imageSrc?: string[]
+  onValueChange: (value: boolean) => void
 }
 
 const SwitchTableField = (props: Props) => {
   const [value, setValue] = useState(false)
 
   useEffect(() => {
-    if (props.value) setValue(props.value)
+    if (value !== props.value) setValue(props.value)
   }, [props.value])
 
+  useEffect(() => {
+    props.onValueChange(value)
+  }, [value])
+
   function onValueChange(value: boolean) {
     setValue(value)
   }