I am trying to use react-hook-form and Material-ui to capture correct data in my form, but I am having difficulties with various inputs, here is the submit result of what I get and listed examples of what is working and what is not working.
{
"height": 183,
"current_weight": NaN,
"weekly_goal": "0.5"
}
My jsx:
1) height input which returns number (everything works):
<input {...register("height", { valueAsNumber: true })} />
2) weight input using Material-Ui returns NaN:
<TextField
className={classes.input}
id="outlined-basic"
type="number"
label="current_weight"
variant="outlined"
{...register("current_weight", {
valueAsNumber: true,
})}
/>
3) Using custom radio button component returns string instead of number:
<MediumRadioButton
title={"Lose 0.2 kilograms per week"}
value={0.2}
{...register("weekly_goal", { valueAsNumber: true })}
/>
What am I doing wrong, is there something wrong with material-ui components?