Default Values not working as expected

[vikas990]

hi, I m facing an issue related to default values as I set the data which is coming from the API and set it to the default values . I m also resetting the values but I can't see the values on the fields and the same problem for dropdowns also. i m using Next js and Material UI for the frontend.

Use Form

Input Fields

[JamesWong1999]

provide a codesandbox?

[vikas990]

hy, thank you for the reply i m using this code to apply defaultValues

const ProfileComponent = ({
onImageChange,
imageUrl,
useForm,
SubmitHandler,
companyData,
onChange,
}) => {
const {
register,
handleSubmit,
formState: { errors },
reset,
} = useForm({
resolver: yupResolver(schema),
defaultValues: {
name: companyData?.name,
about: companyData?.about,
organizationType: companyData?.organizationType,
},
});
useEffect(() => {
reset({
name: companyData?.name,
about: companyData?.about,
organizationType: companyData?.organizationType,
});
}, [reset, companyData]);

return (
<>


{imageUrl ? (

Company Logo

) : (

Profile

)}

Enter Company Details

---

{companyData?.official_name ? (


Company Brand Name

<InputField
name="officialName"
type="text"
placeholder="E.g. Uber"
fullWidth
{...register("officialName")}
error={errors?.officialName?.message && true}
helperText={errors?.officialName?.message}
/>

) : (


Company Brand Name

<InputField
name="name"
type="text"
placeholder="E.g. Uber"
fullWidth
{...register("name")}
error={errors?.name?.message && true}
helperText={errors?.name?.message}
/>

)}


Company Description

<InputField
name="about"
type="text"
placeholder="E.g. Works in health sector"
rows={3}
multiline
fullWidth
{...register("about")}
error={errors?.about?.message && true}
helperText={errors?.about?.message}
/>

{!companyData.official_name && (
<>


Organization Type

<FormControl
error={errors?.organizationType?.message && true}
fullWidth
>
<Select
placeholder="Ex. StartUp"
name="organizationType"
{...register("organizationType")}
>
{degreeOptions.map((degreeOption) => (

{degreeOption?.text}

))}

{errors?.organizationType?.message}




City

<InputField
name="city"
type="text"
placeholder="E.g. Mumbai"
fullWidth
{...register("city")}
value={companyData?.city}
onChange={onChange}
error={errors?.city?.message && true}
helperText={errors?.city?.message}
/>



Number Of Employees

              <InputField
                name="numberOfEmployees"
                type="number"
                placeholder="E.g. 20"
                fullWidth
                {...register("numberOfEmployees")}
                value={companyData?.numberOfEmployees}
                onChange={onChange}
                defaultValue=""
                error={errors?.numberOfEmployees?.message && true}
                helperText={errors?.numberOfEmployees?.message}
              />
            </InputSection>
            <InputSection>
              <InputLabel>
                Address
                <span>*</span>
              </InputLabel>

              <InputField
                name="address"
                type="text"
                placeholder="E.g. 304,airoli plaza b"
                fullWidth
                {...register("address")}
                value={companyData?.address}
                onChange={onChange}
                error={errors?.address?.message && true}
                helperText={errors?.address?.message}
              />
            </InputSection>
            <InputSection>
              <InputLabel>
                Industry
                <span>*</span>
              </InputLabel>
              <FormControl
                error={errors?.industry?.message && true}
                fullWidth
              >
                <Select
                  placeholder="E.g. IT"
                  name="industry"
                  {...register("industry")}
                  defaultValue=""
                >
                  {discOptions.map((discOption) => (
                    <MenuItem key={uuidv4()} value={discOption?.value}>
                      {discOption?.text}
                    </MenuItem>
                  ))}
                </Select>
              </FormControl>
              <ErrorStyle> {errors?.industry?.message}</ErrorStyle>
            </InputSection>
            <InputSection>
              <InputLabel>
                Year of Registeration
                <span>*</span>
              </InputLabel>
              <FormControl
                error={errors?.yearOfIncorporation?.message && true}
                fullWidth
              >
                <Select
                  placeholder="E.g 2020"
                  name="yearOfIncorporation"
                  fullWidth
                  {...register("yearOfIncorporation")}
                >
                  {years.map((year) => (
                    <MenuItem key={uuidv4()} value={year?.value}>
                      {year?.text}
                    </MenuItem>
                  ))}
                </Select>
                <ErrorStyle>
                  {errors?.yearOfIncorporation?.message}
                </ErrorStyle>
              </FormControl>
            </InputSection>
          </>
        )}
        <InputSection>
          <InputLabel>
            Upload Company&apos;s logo (format: png/jpg/jpeg, max-size: 2
            MB)
          </InputLabel>

          <InputField
            name="file"
            type="file"
            hidden
            id="imageChange"
            fullWidth
            {...register("file")}
            onChange={onImageChange}
          />
        </InputSection>
        <InputSection>
          <InputLabel>Website</InputLabel>
          <InputField
            name="website"
            type="text"
            placeholder="E.g. www.google.com"
            fullWidth
            {...register("website")}
            value={companyData?.website}
            onChange={onChange}
          />
        </InputSection>
        <InputSection>
          <InputLabel>Linkdin</InputLabel>

          <InputField
            name="linkedIn"
            type="text"
            placeholder="E.g. www.LinkedIn.com"
            fullWidth
            {...register("linkedIn")}
            value={companyData?.url?.linkedIn}
            onChange={onChange}
          />
        </InputSection>

        <InputSection>
          <Button
            type="submit"
            bgcolor="secondary"
            color="secondary"
            fullWidth
          >
            Save and Continue
          </Button>
        </InputSection>
      </form>
    </div>
  </Card>
</>

);
};

thank you:-

[ritikbanger]

Hello, Default values will not work if you are using a custom component, though you can pass them using states like this:

const { user: user_temp } = useSelector((states: any) => states.authReducer)
const [user, setUser] = useState(user_temp)

i.e. here user_temp contains the default values.
and then use them like this:

const methods = useForm({
    defaultValues: useMemo(() => {
      return user
    }, [user]),
    resolver: yupResolver(validationSchema(translation)),
  })

  const {
    handleSubmit,
    reset,
    register,
    formState: { errors },
  } = methods

[vikas990]

I have recreated the bug.
CodeSandbox:-
https://codesandbox.io/s/summer-hooks-qtx7r

[vikas990]

Hy @ritikbanger , i have tried the solution and it works for the text field but not for the text field can please help me to understand what I m doing wrong.
https://codesandbox.io/s/summer-hooks-qtx7r?file=/components/Form.js

[ritikbanger]

Hello @vikas990, you are giving out of range values as your default value for dropdown.

1. You are using useEffect without dropdown value so it is reseting the value to ' ' and that's why it is not rendering your default value.
2. You are giving out of range select field value, since the field is a select field, it will not render out of range values, you can see a warning for the same.
   I have tweaked a little and it has worked now.

Here is the link: https://codesandbox.io/s/agitated-snowflake-lx1ej?file=/components/Form.js

Here is the code without using useEffect and reset:

import { Card } from "./main.styles";
import { useForm, useWatch } from "react-hook-form";
import { useEffect } from "react";
import { Button, FormControl, InputField, MenuItem, Select } from "./utils";
const Controller = ({ control, register, name, rules, render }) => {
  const value = useWatch({
    control,
    name
  });
  const props = register(name);
  return render({
    value,
    onChange: (e) =>
      props.onChange({
        target: {
          name,
          value: e.target.value
        }
      }),

    onBlur: props.onBlur,
    name: props.name
  });
};
export default function Form() {
  const { register, handleSubmit, reset, control, setValue } = useForm({
    defaultValues: {
      name: "test",
      dropdown: "three"
    }
  });

  // useEffect(() => {
  //   reset({
  //     name: "test2",
  //     dropdown: "two"
  //   });
  // }, [reset]);
  const submitHandler = (data) => {
    console.log(data);
  };
  return (
    <div>
      <Card>
        <h1>Form</h1>
        <form onSubmit={handleSubmit(submitHandler)}>
          <InputField
            fullWidth
            placeholder="name"
            name="name"
            register={register}
          />
          <br />
          <br />
          <Controller
            {...{
              control,
              register,
              name: "dropdown",
              rules: {},
              render: (props) => (
                <FormControl fullWidth>
                  <Select {...props}>
                    <MenuItem value="one">one</MenuItem>
                    <MenuItem value="two">Two</MenuItem>
                    <MenuItem value="three">Three</MenuItem>
                  </Select>
                </FormControl>
              )
            }}
          />

          <br />
          <br />
          <Button fullWidth type="submit">
            Submit
          </Button>
        </form>
      </Card>
    </div>
  );
}

Here is code 2 with UseEffect and reset:

import { Card } from "./main.styles";
import { useForm, useWatch } from "react-hook-form";
import { useEffect } from "react";
import { Button, FormControl, InputField, MenuItem, Select } from "./utils";
const Controller = ({ control, register, name, rules, render }) => {
  const value = useWatch({
    control,
    name
  });
  const props = register(name);
  return render({
    value,
    onChange: (e) =>
      props.onChange({
        target: {
          name,
          value: e.target.value
        }
      }),

    onBlur: props.onBlur,
    name: props.name
  });
};
export default function Form() {
  const { register, handleSubmit, reset, control, setValue } = useForm({
    defaultValues: {
      name: "test",
      dropdown: "three"
    }
  });

  useEffect(() => {
    reset({
      name: "test2",
      dropdown: "two"
    });
  }, [reset]);
  const submitHandler = (data) => {
    console.log(data);
  };
  return (
    <div>
      <Card>
        <h1>Form</h1>
        <form onSubmit={handleSubmit(submitHandler)}>
          <InputField
            fullWidth
            placeholder="name"
            name="name"
            register={register}
          />
          <br />
          <br />
          <Controller
            {...{
              control,
              register,
              name: "dropdown",
              rules: {},
              render: (props) => (
                <FormControl fullWidth>
                  <Select {...props}>
                    <MenuItem value="one">one</MenuItem>
                    <MenuItem value="two">Two</MenuItem>
                    <MenuItem value="three">Three</MenuItem>
                  </Select>
                </FormControl>
              )
            }}
          />

          <br />
          <br />
          <Button fullWidth type="submit">
            Submit
          </Button>
        </form>
      </Card>
    </div>
  );
}

[vikas990]

hy @ritikbanger, thank you so much it works just great.

[vikas990]

yes, Thank you again.

[mbrowne]

I discovered that it's also possible to use a custom select component (that doesn't use a native <select>) without necessarily making it a controlled component. Here's an example (note: this is using a custom-built Select component, not material-ui, but I think a similar approach should work with material-ui or any other third-party Select component):

    const field = register('countryId')
    const initialVal = React.useRef(getValues(field.name))
    ...
    <Select
        {...field}
        defaultValue={initialVal.current}
        onChange={(selectedOption) => {
            setValue(field.name, selectedOption.value)
        }}
        options={countryOptions}
    />