Form is not updating when using hooks - reactjs

Question

When using React Hooks my inputs are not updating. It means that when I'm updating the input in HTML, the formData is like:
{username: "", password: "", "": "a", undefined: undefined}. What's happening?
export default function Login() {
const [formData, setFormData] = useState({
username: "",
password: "",
});
async function handleSubmit(event: FormEvent) {
event.preventDefault();
const body = {
username: (event.currentTarget as any).username.value,
password: (event.currentTarget as any).password.value,
};
const res = await fetch("/api/login", {
method: "POST",
body: JSON.stringify(body),
headers: {
"Content-Type": "application/json",
},
});
if (res.ok) {
Router.push("/");
}
}
function handleChange(event: FormEvent<HTMLInputElement>) {
setFormData((prevState) => ({
...prevState,
[event.currentTarget?.name]: event.currentTarget?.value,
}));
}
return (
<Layout>
<form onSubmit={handleSubmit}>
<FormInput
label="User name"
placeholder="Enter your username"
type="text"
value={formData.username}
onChange={handleChange}
/>
<FormInput
label="Password"
placeholder="Enter your password"
type="password"
value={formData.password}
onChange={handleChange}
/>
<input type="submit" value="Send" />
<Link href="/register">Create account</Link>
</form>
</Layout>
);
}
FormInput component is just:
type Props = {
label: string;
} & React.HTMLProps<HTMLInputElement>;
export default function FormInput({ label, ...props }: Props) {
return (
<>
<label htmlFor={label}>{label}</label>
<input {...props} />
</>
);
}

Answer 1

You need to implement handleChange as a callback and add the name prop. Use event.target;
export default function Login() {
const [formData, setFormData] = useState({
username: "",
password: "",
});
const handleSubmit = (event: FormEvent) => {
event.preventDefault();
const body = {
username: (event.currentTarget as any).username.value,
password: (event.currentTarget as any).password.value,
};
const res = await fetch("/api/login", {
method: "POST",
body: JSON.stringify(body),
headers: {
"Content-Type": "application/json",
},
});
if (res.ok) {
Router.push("/");
}
}
const handleChange(event: FormEvent<HTMLInputElement>) => {
setFormData((prevState) => ({
...prevState,
[event.target?.name]: event.target?.value,
}));
}
return (
<Layout>
<form onSubmit={handleSubmit}>
<FormInput
label="User name"
placeholder="Enter your username"
type="text"
value={formData.username}
onChange={handleChange}
name="username"
/>
<FormInput
label="Password"
placeholder="Enter your password"
type="password"
value={formData.password}
onChange={handleChange}
name="password"
/>
<input type="submit" value="Send" />
<Link href="/register">Create account</Link>
</form>
</Layout>
);
}