React Formik updating one field based on another

❓Question

I’m using formik react library and trying to update 2 fields, based on the onChange event of anothers. For example,

price = quantity * totalPrice

price :

onChange={() => {
  setFieldValue('quantity',values.quantity? values.price / values.totalPrice:values.quantity, );
  setFieldValue('totalPrice',values.totalPrice? values.price * values.quantity: values.totalPrice,);
  }
}

quantity :

onChange={(value, e) => { 
  this.disableFiled(value, e); 
  setFieldValue('totalPrice',values.price ? values.price * values.totalPrice : ' ',);
  }
}

totalPrice:

onChange={(value, e) => { 
  this.disableFiled(value, e);
  setFieldValue('quantity',values.price ? values.totalPrice / price : ' ', ); 
  }
}

when quantity has value total price will be disabled and vice versa.but it doesn’t calculate other fields correctly

[johnrom]

You can also use an effect and a child component. Theres been some discussion of change listeners but we haven’t found the ideal API for it yet.

In child component: (apologies for mobile formatting)

const formik = useFormikContext();

React.useEffect(() =>
    formik.setFieldValue("dependentField", calculateDependentValue(formik.values.mainField);
}, [formik.values.mainField]);

Pros are a more decentralized approach, cons are extra components and a render where they aren’t in sync.

I’d recommend against changing properties directly on formik.values! Treat it as an immutable object.

[alexbepple]

@rahi-nz Could you kindly format your code? It is very hard to read.

I stumbled upon this issue when researching whether there is a more elegant solution than ours. This is what we did (pseudo-code):

onChange={(e) => {
    formikProps.handleChange(e);
    formikProps.values.dependentValue = calcDependent(e.target.value);
}}

I find this rather disturbing, but we could not think of a better way to do it. Can you, @jaredpalmer?

I find the above disturbing because

• it throws the abstraction that Formik provides out of the window (e.target.value)
• it modifies the state of something that does not have a specified API. Not only is this hacky, but it might also stop working with any release.