Are you submitting a bug report or a feature request?
bug report
What is the current behavior?
After npm upgrading to the latest React, I am getting the following warning in my console from the React Developer tools Chrome extension:
"Warning: Cannot update a component from inside the function body of a different component."
The component trace just points to a line with a boring/standard use of Field in JSX. Quickly going through the app I'm working on, this warning happens everywhere, on every use of Field in the app. For example, the warnings point to lines like the 2nd to last line (RadioField = ...) of this file (please excuse the coding style here). Again, there is nothing special about this code; it's happening on every Form that has components that use Field.
import React from "react";
import { Field } from "react-final-form";
const Radio = ({label,input,children,className}) => {
const { checked } = input;
return (
<label className={"input-radio "+ (checked? "is-checked ": "")+
className}>
{children && children}
<input
{...input}
className="form-radio"
/>
<var title={label}>{label}</var>
</label>
);
};
Radio.defaultProps = { label:"", meta:{}, input:{}, children:[] };
const RadioField = props => <Field {...props} component={Radio} type="radio"/>;
export default RadioField;
What is the expected behavior?
No warning
Sandbox Link
I'll make one if you need it, but I think the link below in Other Information succinctly explains what is happening and a hooks based workaround that react-final-form can implement.
What's your environment?
ChromeOS 79
React 16.13.0 released Feb 26th, 2020
Final Form 4.18.7
React Final Form 6.3.5
Other information
See here: https://reactjs.org/blog/2020/02/26/react-v16.13.0.html#warnings-for-some-updates-during-render
Are you submitting a bug report or a feature request?
bug report
What is the current behavior?
After npm upgrading to the latest React, I am getting the following warning in my console from the React Developer tools Chrome extension:
"Warning: Cannot update a component from inside the function body of a different component."
The component trace just points to a line with a boring/standard use of
Fieldin JSX. Quickly going through the app I'm working on, this warning happens everywhere, on every use ofFieldin the app. For example, the warnings point to lines like the 2nd to last line (RadioField = ...) of this file (please excuse the coding style here). Again, there is nothing special about this code; it's happening on everyFormthat has components that useField.What is the expected behavior?
No warning
Sandbox Link
I'll make one if you need it, but I think the link below in Other Information succinctly explains what is happening and a hooks based workaround that react-final-form can implement.
What's your environment?
ChromeOS 79
React 16.13.0 released Feb 26th, 2020
Final Form 4.18.7
React Final Form 6.3.5
Other information
See here: https://reactjs.org/blog/2020/02/26/react-v16.13.0.html#warnings-for-some-updates-during-render