How can I get old value in input's onChange event?

Question

I have some inputs defined in react. I'm assigning a function to their onChange function. I can find the current value. How can I get the old value in simplest way?

The reason I want this is because I want to find the ratio of this new value to the old value and do some operations.

Sample code:

let onChange = (e) => {
    let newValue = e.target.value; // let oldValue = will be here     

}

<Input type="number"  onChange={onChange }></Input>

You probably need `useRef` to store the old value and compare it with the current. https://reactjs.org/docs/hooks-reference.html#useref — Delice, Aug 23 '21 at 12:47
I create the inputs dynamically and add the event to them at that time. It is unclear how many references there will be for this. — HAMDİ DAMAR, Aug 23 '21 at 13:20
``` {layerArr.map((layer, index) => { return (
Layer - {index + 1}
) })} ``` — HAMDİ DAMAR, Aug 23 '21 at 13:22
I mean the number of inputs changes dynamically. and accordingly the UI is updated again — HAMDİ DAMAR, Aug 23 '21 at 13:24

score 3 · Accepted Answer · answered Aug 23 '21 at 12:50

3

If the old value is not needed in the component state, use a ref like the following, you can change its initial value

const oldValueRef = React.useRef(0)

let onChange = (e) => {
    const oldValue = oldValueRef.current;
    let newValue = e.target.value; // let oldValue = will be here

    // after everything     
    oldValueRef.current = e.target.value;
}

<Input type="number" onChange={onChange }></Input>

answered Aug 23 '21 at 12:50

iunfixit

910
1
15

i was able to do it by applying the solution [here](https://stackoverflow.com/questions/54633690/how-can-i-use-multiple-refs-for-an-array-of-elements-with-hooks) thanks – HAMDİ DAMAR Aug 24 '21 at 05:06

score 2 · Answer 2 · answered Aug 23 '21 at 13:00

You can use a state to do it:

const [state, setState] = useState("");

let onChange = (e) => {
  let oldValue = state; 
  let newValue = e.target.value;
  setState(newValue)
  // your logic
};

<Input type="number" value={state} onChange={onChange}></Input>;

How can I get old value in input's onChange event?

2 Answers2

Linked