From 764e6d77877c0f230fabc401b59b36f9576d0ff2 Mon Sep 17 00:00:00 2001
From: "sigonasr2, Sig, Sigo" <sigonasr2@gmail.com>
Date: Tue, 14 Dec 2021 11:09:53 +0000
Subject: [PATCH] equation parts spanning.

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

diff --git a/equations/src/App.js b/equations/src/App.js
index 816311f..2de3771 100644
--- a/equations/src/App.js
+++ b/equations/src/App.js
@@ -3,18 +3,36 @@ import {useEffect,useState} from 'react';
 import './App.css';
 
 function Equation(p) {
+	const {data} = p
 	const [operator,setOperator] = useState("disabled")
-	const [val,setVal] = useState(0)
+	const [field,setField] = useState(0)
 	
-	return <>val</>
+	return <><select>
+	{Object.keys(data).map((key)=><option>{key}</option>)}
+	</select></>
+}
+
+function EquationBuilder(p) {
+	const {data} = p
+	const [equationParts,setEquationParts] = useState([<Equation data={data}/>])
+	return <>
+		<button onClick={()=>{
+			setEquationParts([...equationParts,<Equation data={data}/>])}}>+</button>
+		<br/><br/>
+		{equationParts.map((eq)=>eq)}</>
 }
 
 function App() {
+	const fieldData = {
+		data1:84,
+		data2:49,
+		data3:3.5,
+		data4:67
+	}
+	
   return (
     <div className="App">
-      <header className="App-header">
-        <Equation/>
-      </header>
+        <EquationBuilder data={fieldData}/>
     </div>
   );
 }