Zenn
Open2

Material-UIとReact Hook Formの組み合わせ実装時の注意点

Material-UI
React Hook Form
まつだけまつだけ

useFormでdefaultValueを設定しない場合

<TextField
  label="名前"
  {...register('name', {
    required: '名前を入力してください',
    maxLength: {
      value: 255,
      message: '255文字以内で入力してください',
    },
  })}
  error={Boolean(errors.name)}
  helperText={errors.name?.message}
/>

useFormでdefaultValueを設定する場合

<Controller
  name="name"
  control={control}
  rules={{
    required: '名前を入力してください',
    maxLength: {
      value: 255,
      message: '255文字以内で入力してください',
    },
  }}
  render={({
    field: {
      onChange, onBlur, value, name, ref,
    },
  }) => (
    <TextField
      label="名前"
      onChange={onChange}
      onBlur={onBlur}
      value={value}
      name={name}
      inputRef={ref}
      error={Boolean(errors.name)}
      helperText={errors.name?.message}
    />
  )}
/>