How to make calculations based on insertion of fields in the reactjs?

Question

      handleContractValueChange(e) {
  this.setState({ currency: e.target.value });
    console.log(e.target.value);
 }

handleSubscrtiptionAmountChange(e) {
    this.setState({ subscriptionamount: e.target.value });
    console.log(e.target.value);

}

 handleQuarterPercentageChange(e){
    this.setState({Quarterpercentage: e.target.value});
   console.log(e.target.value);

  }




  <div className="form-group row">

<label className="col-sm-2 form-control-label text-xs-right"> Contract Value: </label>
<div className="col-sm-3">
    <input type="text" className="form-control box_ip" placeholder="Contract Amount" id="Contract Value" onChange={this.handleContractValueChange} value={this.state.currency} />
</div>

   <label className="col-sm-2 form-control-label text-xs-right"> Monthly Subscription Amount Payback percent</label>
    <div className="col-sm-3">
        <input type="text" className="form-control box_ip" placeholder="SGD" id="Subscription Amount" onChange={this.handleSubscrtiptionAmountChange} name='Subscription Amount' value={this.state.subscriptionamount} />
    </div>
</div>

<div>
<label className="col-sm-2 form-control-label text-xs-right"> Monthly Subscription amount Payback: </label>
<div className="col-sm-3">
    <input type="text" className="form-control box_ip" placeholder="Monthly Subscription amount Payback" id="Monthly Subscription amount Payback" onChange={this.handleQuarterPercentageChange} value={this.state.Quarterpercentage} /> </div>    

</div>

I have three fields Contract Value,Monthly Subscription Amount Payback percent, Monthly Subscription amount Payback based on filling Contract Value,Monthly Subscription Amount Payback percent third field(Monthly Subscription amount Payback) should be filled automatically.

Let us example if i fill contract value has 1000 Monthly Subscription Amount Payback percent is 2(it is in percentagebased on contract value and Monthly Subscription Amount Payback Quarterpercentage third field should fill automatically)

then Subscription Amount Payback should be auto filled with 1000/100 * 2 = 20 so 20 will be filled in the Subscription Amount Payback

Answer 1

You can set the value of third field on the onChange

handleContractValueChange(e) {
      let Quarterpercentage = 0;
      if(this.state.subscriptionamount > 0) {
         Quarterpercentage = (this.state.subscriptionamount * e.target.value)/100;       
       }
      this.setState({ 
         currency: e.target.value,
         Quarterpercentage
      });
        console.log(e.target.value);
     }

You can do the same for handleSubscrtiptionAmountChange.

handleSubscrtiptionAmountChange(e) {
      let Quarterpercentage = 0;
      if(this.state.currency > 0) {
         Quarterpercentage = (this.state.currency * e.target.value)/100;       
       }

    this.setState({ 
      subscriptionamount: e.target.value,
      Quarterpercentage
    });
    console.log(e.target.value);

}