Delay on updating the state by one character

Admin 1
Viewed 160

I have 4 input fields where I am entering the amount and based on that amount I am getting the rate.

Scenario: when user is filling in the field, for example inputing 20000 in input1 the rate has to be 116.04 but instead of that user gets 11.60. So there is an obvious delay of 1 character and as soon as I put 0 in the input2 field I get the correct rate which is 116.04 This is not acceptable for me as I have 4 fields overall and numbers are always different. How can I fix it??? This is my state:

 this.state = {
            input: {
                amount: '20000',
                inputField1: '',
                inputField2: '',
                inputField3: '',
                inputField4: '',
                ...window.input,
            },

These are my input fields:

 <Input className="col-8"
                value={this.state.input.inputField1}
                onChange={(event) => {
                this.updateInputField("inputField1", event.target.value);
                }}/>
<Input className="col-8"
                value={this.state.input.inputField2}
                onChange={(event) => {
                this.updateInputField("inputField2", event.target.value);
                }}/>
<Input className="col-8"
                value={this.state.input.inputField3}
                onChange={(event) => {
                this.updateInputField("inputField3", event.target.value);
                }}/>
<Input className="col-8"
                value={this.state.input.inputField4}
                onChange={(event) => {
                this.updateInputField("inputField4", event.target.value);
                }}/>

These are my methods:

updateInput = (key, value) => {
    let input = {...this.state.input};
    input[key] = value;
    window.input = input;
    this.calculate(input);
};

updateInputField= (key, value) => {
    let {input} = this.state;
    let sum = +input.inputField1 + +input.inputField2 + +input.inputField3 + +input.inputField4
    input[key] = value;
    this.setState({input});
    window.input = input;
    this.updateInput("amount",sum)// this is where I am getting the delay
};

I am trying to should the total Amount using this state:

<p>{this.state.input.amount}</p>
onchange reactjs input
1 Answers

In your updateInputField function - Instead of calculating the sum before updating input[key], try updating updating input[key], then calculate sum. Like this:

// first, update 'input' with the new value
input[key] = value;

// next, calculate the new sum
let sum = +input.inputField1 + +input.inputField2 + +input.inputField3 + +input.inputField4

The "Delay" you're seeing is due to the fact that your code follows this order:

  1. Gets old input values from state
  2. Calculates the sum of the old input values
  3. Updates input (at the current key that got updated) with the value
    • This needs to be #2, not #3!
  4. Sets the updated input in state
  5. Calls this.updateInput

So your new updateInputField function would look like this:

updateInputField= (key, value) => {
    let {input} = this.state;
    // first, update 'input' with the new value
    input[key] = value;

    // next, calculate the new sum
    let sum = +input.inputField1 + +input.inputField2 + +input.inputField3 + +input.inputField4

    this.setState({input});
    window.input = input;
    this.updateInput("amount",sum)
};
user_24304140
Related