CF2-7: Fix с добавлением useState

src/components/Display.jsx

@@ -1,23 +1,27 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import {CaretUpOutlined, CaretDownOutlined} from '@ant-design/icons'
 
 export const ValueDisplay = ({prefix, value, suffix, isArrowVisible}) =>{
   const [oldVal, setOldVal] = useState(NaN)
+  const [val, setVal] = useState('---')
 
-  let val = '---'
   let arrow = null
+
+  useEffect(()=>{
     if(value)
       if(Number.isFinite(+value)){
-      val = (+value).toPrecision(4)??'---'
+        setVal((+value).toPrecision(4)??'---')
         if (isArrowVisible)
         {
-        arrow = value > oldVal 
-          ? <CaretUpOutlined style={{color:"red"}} onClick={!isArrowVisible} /> 
-          : <CaretDownOutlined style={{color:"red"}} onClick={!isArrowVisible} />
+          if (value > oldVal)
+            arrow = <CaretUpOutlined style={{color:"red"}} />
+          else if (value < oldVal)
+            arrow = <CaretDownOutlined style={{color:"red"}} />
           setOldVal(value)
         }
       } else
-      val = value
+      setVal(value)
+  },[value])
 
   return(<span className='display_value'>{prefix} {val} {suffix}{arrow}</span>)
 }