Controlled input in form throwing error upon submission - reactjs

Question

I have been trying to submit a login request using a form with controlled input. A submit function is passed down the React components to be triggered upon onClick of a material-ui Button. This error is only thrown when I send a mutation request using Apollo Client.
index.js:1375 Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.
From my understanding of controlled components in React's docs, input components are "controlled" by using React value and setValue state hooks in value and onChange attributes.
This is the top level Login component that contains the submit function and useMutation hook. submit is first passed down to a LoginForm component.
const Login = () => {
const [login, { data }] = useMutation(LOGIN);
console.log(data);
const submit = async form => {
console.log(form); // form object looks correct
await login({ variables: form });
};
...
<Container>
<LoginForm submit={submit} />
</Container>
This is the LoginForm component, which renders a GeneralForm component. Again, submit is passed down to GeneralForm.
const fields = [
{
id: "username",
label: "Username",
required: true,
placeholder: "example: 98sean98"
},
...
const LoginForm = props => {
const { submit } = props;
...
<Container>
<GeneralForm fields={fields} submit={submit} />
</Container>
This is the GeneralForm component.
const GeneralForm = props => {
const { fields, submit } = props;
const [form, setForm] = useState({});
useEffect(() => {
fields.forEach(field => {
form[field.id] = "";
});
setForm(form);
}, [form, fields]);
const handleChange = event => {
form[event.target.id] = event.target.value;
setForm(setForm);
};
const handleSubmit = () => {
if (validateForm(form)) { // returns a boolean indicating validity
submit(form); // trigger the submit function that is passed down from <Login />
} else {
alert("invalid form");
}
};
return (
<FormGroup>
{fields.map(field => (
<FormControl key={field.id} required={field.required}>
<InputLabel htmlFor={field.id}>{field.label}</InputLabel>
<Input
required={field.required}
id={field.id}
type={field.type ? field.type : "text"}
aria-describedby={
field.helperText ? `${field.id}-helper-text` : null
}
placeholder={field.placeholder}
value={form[field.id]}
onChange={handleChange}
/>
{field.helperText ? (
<FormHelperText id={`${field.id}-helper-text`}>
{field.helperText}
</FormHelperText>
) : null}
</FormControl>
))}
<Button type="submit" onClick={handleSubmit}>
Submit
</Button>
</FormGroup>
);
};
My dev environment
partial packages list:
"#apollo/react-hooks": "^3.1.3",
"#material-ui/core": "^4.7.0",
"#material-ui/icons": "^4.5.1",
"apollo-boost": "^0.4.4",
"graphql": "^14.5.8",
"react": "^16.10.2",
"react-dom": "^16.10.2",
Machine: MacOS X Catalina 10.15.1
The peculiar behaviour I'm observing now is that without calling the Apollo Client mutation request,
const submit = async form => {
console.log(form);
// await login({ variables: form });
};
the above error does not get triggered. So, I wonder if Apollo Client is altering my form object incorrectly in some way.

Answer 1

I have spent some time digging around the internet, and this resource seems to be quite helpful. Apparently, all I had to do was to switch the value attribute of Input to listening to value that is exposed by React state in the same component instead of form[field.id] passed down from another component.
// GeneralForm.js
...
const [value, setValue] = useState(form[field.id] ? form[field.id] : "");
...
<Input value={value} ... />
So, I modularised the Input component along with its parent FormControl into another file called FormInput.js, and arrived at this solution.
// FormInput.js
const FormInput = props => {
const { field, form, setForm } = props;
const [value, setValue] = useState(form[field.id] ? form[field.id] : "");
const handleChange = event => {
setValue(event.target.value);
setForm({
...form,
[event.target.id]: event.target.value
});
};
return (
<FormControl key={field.id} required={field.required}>
<InputLabel htmlFor={field.id}>{field.label}</InputLabel>
<Input
required={field.required}
id={field.id}
type={field.type ? field.type : "text"}
aria-describedby={field.helperText ? `${field.id}-helper-text` : null}
placeholder={field.placeholder}
value={value}
onChange={handleChange}
/>
{field.helperText ? (
<FormHelperText id={`${field.id}-helper-text`}>
{field.helperText}
</FormHelperText>
) : null}
</FormControl>
);
};
Then, I import FormInput into GeneralForm, passing down all necessary props.