state = { Baseline: 0, // NewContract: 0 } handleOTS(e) { e.preventDefault(); this.setState({Baseline: e.target.value}); } handleTSNC(e) { e.preventDefault(); this.setState({NewContract: e.target.value}); } render() { const Impactdkk = (this.state.Baseline - this.state.NewContract) || 0; const Impactpercentage = Math.round((Impactdkk / this.state.Baseline || 0) * 100); return( <div className="App"> <Grid item xs={12} md={4} lg={4}> <Card> <Box p={3}> <CardHeader title="OVI" align="center" style={{ backgroundColor: "#002B45", color: "white" }} /> <TextField id="oviBaseline" label="Total spend / Baseline (DKK)" variant="outlined" fullWidth margin="normal" value={this.state.Baseline} onChange={(e) => this.handleOTS(e)} /> <TextField id="oviNewContract" label="Total spend new contract (DKK)" variant="outlined" fullWidth margin="normal" value={this.state.NewContract} onChange={(e) => this.handleTSNC(e)} /> <TextField id="oviImpactValue" label="Impact (DKK)" variant="outlined" fullWidth margin="normal" value={(Impactdkk)} /> <TextField id="oviImpactPercentage" label="Impact (%)" variant="outlined" fullWidth margin="normal" value={(Impactpercentage)} /> </Box> </Card> </Grid> <Grid item xs={12} md={4} lg={4}> <Card> <Box p={3}> <CardHeader title="EBIT" align="center" style={{ backgroundColor: "#002B45", color: "white" }} /> <TextField id="Baseline" label="Total spend / Baseline (DKK)" variant="outlined" fullWidth margin="normal" value={this.state.Baseline} onChange={(e) => this.handleOTS(e)} /> <TextField id="NewContract" label="Total spend new contract (DKK)" variant="outlined" fullWidth margin="normal" value={this.state.NewContract} onChange={(e) => this.handleTSNC(e)} /> <TextField id="ebitImpactValue" label="Impact (DKK)" variant="outlined" fullWidth margin="normal" value={(Impactdkk)} /> <TextField id="Impactpercentage" label="Impact (%)" variant="outlined" fullWidth margin="normal" value={(Impactpercentage)} /> </Box> </Card> </Grid> </div>
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)