You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Warning: Cannot update a component (`TextField`) while rendering a different component (`TextField`). To locate the bad setState() call inside `TextField`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
at TextField (https://w7ue89.csb.app/src/App.tsx:55:19)
at ConditionalValidationTextField (https://w7ue89.csb.app/src/App.tsx:79:51)
at div
at form
at ReactFinalForm (https://w7ue89.csb.app/node_modules/react-final-form/dist/react-final-form.es.js:170:20)
at div
at App
⚠️ IMPORTANT ⚠️ – By default, in order to allow inline fat-arrow validation functions, the field will not rerender if you change your validation function to an alternate function that has a different behavior. If you need your field to rerender with a new validation function, you will need to update another prop on the Field, such as key.
This is still an issue. Complex validation functions that might not be dependent directly on form value/values but on additional data, would still throw that warning when following the documentation and changing the key of the field.
In a state of React where we can simply memoize the validate function, we don't even need final form to do that for us.
Are you submitting a bug report or a feature request?
Bug report
What is the current behavior?
Changing the key of a field in order to rerender it with a new
validate
prop results in a console warning.Example console warning from provided sandbox:
What is the expected behavior?
There is no warning on rerender of field.
My understanding is that this is the proper way to change the inline validation on a field:
Sandbox Link
Example with a conditional validate function
What's your environment?
Other information
There are a few related issues that have a similar symptom:
ForwardRef(Field)
) while rendering a different component (ForwardRef(Field)
) #850Title
) while rendering a different component (FormSpy
) #828The text was updated successfully, but these errors were encountered: