equation parts spanning.

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