From b4ff202cf9cae0f6dcd93e2cbf2bce52f8a9605b Mon Sep 17 00:00:00 2001
From: "sigonasr2, Sig, Sigo" <sigonasr2@gmail.com>
Date: Tue, 14 Dec 2021 16:27:42 +0000
Subject: [PATCH] setup setters.

---
 equations/src/App.js | 32 ++++++++++++++++++++++++++++----
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/equations/src/App.js b/equations/src/App.js
index bf15fa4..c4bc1ae 100644
--- a/equations/src/App.js
+++ b/equations/src/App.js
@@ -7,16 +7,30 @@ function EquationGroup(p) {
 	
 	const [myArr,setMyArr] = useState(arr)
 	
+	useEffect(()=>{
+		var eqArr = [...equation]
+		eqArr[id] = [...myArr]
+		setEquation(eqArr)
+	},[myArr])
+	
 	return <>
-	<span style={{fontSize:"24"}}>(</span>
+	<span style={{fontSize:"24px"}}>(</span>
 	{arr.map((eq,i)=>Array.isArray(eq)?<EquationGroup equation={myArr} setEquation={setMyArr} data={data} arr={eq} key={i} id={i}/>:eq==="×"||eq==="-"||eq==="+"||eq==="÷"?<EquationOperator equation={myArr} setEquation={setMyArr} data={data} operator={eq} key={i} id={i}/>:<EquationValue equation={myArr} setEquation={setMyArr} data={data} val={eq} key={i} id={i}/>)}
-	<span style={{fontSize:"24"}}>)</span>
+	<span style={{fontSize:"24px"}}>)</span>
 	</>
 }
 
 function EquationOperator(p) {
 	const {equation,setEquation,data,operator,key,id} = p
 	
+	const [op,setOp] = useState(operator)
+	
+	useEffect(()=>{
+		var eqArr = [...equation]
+		eqArr[id] = op
+		setEquation(eqArr)
+	},[op])
+	
 	return <>
 	{operator}
 	</>
@@ -25,9 +39,19 @@ function EquationOperator(p) {
 function EquationValue(p) {
 	const {equation,setEquation,data,val,key,id} = p
 	
-	return <>
+	const [item,setItem] = useState(val)
+	
+	useEffect(()=>{
+		var eqArr = [...equation]
+		eqArr[id] = item
+		setEquation(eqArr)
+	},[item])
+	
+	return <div style={{display:"inline-block",border:"1px solid black"}}>
+	{val}
+	<br/>
 	{data[val]}
-	</>
+	</div>
 }
 
 function Equation(p) {