You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 lines
990 B
42 lines
990 B
import logo from './logo.svg';
|
|
import {useEffect,useState} from 'react';
|
|
import './App.css';
|
|
|
|
function Equation(p) {
|
|
const {data} = p
|
|
const [operator,setOperator] = useState("disabled")
|
|
const [field,setField] = useState(Object.keys(data)[0])
|
|
|
|
return <div style={{display:"inline-block",border:"1px solid black"}}>
|
|
<select onChange={(ev)=>{setField(ev.currentTarget.value)}}>
|
|
{Object.keys(data).map((key)=><option value={key}>{key}</option>)}
|
|
</select><br/>
|
|
{data[field]}</div>
|
|
}
|
|
|
|
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">
|
|
<EquationBuilder data={fieldData}/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App;
|
|
|