Click here to Skip to main content
15,867,308 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hello, I have following code:
JavaScript
   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>


What I have tried:

I have two forms: OVI and EBIT. Their main purpose is doing the same calculations, but the output needs to be showed in one form, where the input has been made by the user. At the moment they share the same state, so when user makes a calculation in for example EBIT field, it changes also in OVI. Does anyone knows how to change that?
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900