How to add two fields in a form and show in 3rd field using Redux Form

Question

I am using Redux-Form, where I have 2 fields 'client income' and 'partner income', and I need to show the sum of the values in another field, onChange of above 2 fields.

I tried storing the sum in a global variable but it's not working.

The behavior is like below, if I try adding 12+ 13 instead of 25, it's coming as 27. I identified the cause, it's happening as it is taking it as 1+12+1+13. I am not sure how to mitigate the issue.

I could have used onBlur , but onChange is the requirement.

Any help would be appreciated.

Answer 1

Can you use debounce? There's an NPM module react-debounce-input to give you a general idea of implementation.

Answer 2

Use formValueSelector to connect() to form values and these values will be available in props of your form.

const selector = formValueSelector('simple');

SimpleForm = connect(
  state => {
    return {
      number1: selector(state, 'number1'),
      number2: selector(state, 'number2'),
    }
  }
)(SimpleForm);

Codesandbox demo