Initializing and setting Material UI TextField state as a number - reactjs

Question

I am working on a workout logger, where users can log their sets for exercises. I am using the MERNG stack for this project. Currently, I am working on the validation for logging a set on the front end. This will ask users for these: exercise name(String), weight(Float), reps(Int) and notes(String - optional) in a form. The problem I am having, is initializing and setting the weight and reps in their respected types. This is the initial states I have set for these fields:
{
exerciseName: "",
weight: "",
reps: "",
notes: "",
}
I realize that this will return the weight and reps as Strings, so I tried this as well (although, I don't want fields to have a weight and rep already entered for them, in case they forget to input these themselves and add it to their logs).
{
exerciseName: "",
weight: 0,
reps: 0,
notes: "",
}
This approach works to a certain degree, as the console logs them as Numbers but when the user changes this in the TextField(Material UI), they end up getting submitted as Strings anyway. Therefore, I receive the 400 status code from my backend, as these should be a Float and an Int. How can I achieve the result of initializing and setting these values as numbers only, so no error fires?
Form
const [errors, setErrors] = useState({});
const { onChange, onSubmit, values } = useForm(registerSet, { // Uses a hook for forms
exerciseName: "",
weight: "",
reps: "",
notes: "",
});
return (
<form
onSubmit={onSubmit}
id="addSetForm"
noValidate
autoComplete="off"
>
<TextField
name="exerciseName"
label="Exercise Name"
variant="outlined"
fullWidth
select
className={classes.formInput}
value={values.exerciseName}
error={errors.exerciseName ? true : false}
onChange={onChange}
>
<MenuItem key="Bench Press" value="Bench Press">
Bench Press
</MenuItem>
<MenuItem key="Deadlift" value="Deadlift">
Deadlift
</MenuItem>
<MenuItem key="Squat" value="Squat">
Squat
</MenuItem>
</TextField>
<Grid container spacing={1} className={classes.formInput}>
<Grid item xs={6}>
<TextField
name="weight"
label="Weight"
type="number"
variant="outlined"
fullWidth
value={values.weight}
error={errors.weight ? true : false}
onChange={onChange}
/>
</Grid>
<Grid item xs={6}>
<TextField
name="reps"
label="Reps"
type="number"
variant="outlined"
fullWidth
value={values.reps}
error={errors.reps ? true : false}
onChange={onChange}
/>
</Grid>
</Grid>
</form>
)
formHooks.js (useForm)
export const useForm = (callback, initialState = {}) => {
const [values, setValues] = useState(initialState);
const onChange = (event) => {
setValues({ ...values, [event.target.name]: event.target.value });
};
const onSubmit = (event) => {
event.preventDefault();
callback();
};
return {
onChange,
onSubmit,
values
};
};

Answer 1

You need to alter onChange function. If you console.log(typeof event.target.value) it will be string.
const onChange = (event) => {
setValues({ ...values, [event.target.name]: e.target.type === 'number' ? parseInt(e.target.value) : e.target.value });
};