diff --git a/src/components/Display.jsx b/src/components/Display.jsx
index d021b81..763b634 100644
--- a/src/components/Display.jsx
+++ b/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
-  if(value)
-    if(Number.isFinite(+value)){
-      val = (+value).toPrecision(4)??'---'
-      if (isArrowVisible)
-      {
-        arrow = value > oldVal 
-          ? <CaretUpOutlined style={{color:"red"}} onClick={!isArrowVisible} /> 
-          : <CaretDownOutlined style={{color:"red"}} onClick={!isArrowVisible} />
-        setOldVal(value)
-      }
-    } else
-      val = value
+
+  useEffect(()=>{
+    if(value)
+      if(Number.isFinite(+value)){
+        setVal((+value).toPrecision(4)??'---')
+        if (isArrowVisible)
+        {
+          if (value > oldVal)
+            arrow = <CaretUpOutlined style={{color:"red"}} />
+          else if (value < oldVal)
+            arrow = <CaretDownOutlined style={{color:"red"}} />
+          setOldVal(value)
+        }
+      } else
+      setVal(value)
+  },[value])
 
   return(<span className='display_value'>{prefix} {val} {suffix}{arrow}</span>)
 }