Form is receiving the wrong data type, returning a string instead of number or NaN

Viewed 1375

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?

1 Answers
Related