From 47262a8b8f1aee38ceacb743049eead47a121e7d Mon Sep 17 00:00:00 2001
From: KharchenkoVV <vv.harchenko@autodrilling.ru>
Date: Mon, 24 May 2021 17:57:13 +0500
Subject: [PATCH] =?UTF-8?q?CF2-7:=20Fix=20=D1=81=20=D0=B4=D0=BE=D0=B1?=
 =?UTF-8?q?=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8=D0=B5=D0=BC=20useState?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Display.jsx | 32 ++++++++++++++++++--------------
 1 file changed, 18 insertions(+), 14 deletions(-)

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>)
 }