CODEWITHSUNDEEP
javascriptreactjsreact-final-formfinal-form
Jackson
Jackson

Reputation: 3518

Clearing a text field value using a final-form calculator

I am trying to use the final-form calculator to clear a field whenever another field has changed.

In my example, I have two fields. Whenever the first field changes, the second field is cleared. This is expected.

However, A problem arises when the parent component of the form is re-rendered. Each time the parent component calls to it's render function, the second field is cleared even though the first field has not changed. This can be observed by clicking the forceUpdate button at the top.

Is it possible to prevent the second field from clearing like this? Preferably without using shouldComponentUpdate

Upvotes: 0

Views: 76

Answers (1)

Jackson
Jackson

Reputation: 3518

I have been able to resolve it by moving the decorators array outside of the component.

const decorators = [calculator]; // declared outside of App

And reference the value in the form props

<Form
  decorators={decorators}
  ...

Upvotes: 0

Related Questions