I'm hoping I'm close to translating my old react hook forms to RHF7 but I'm stuck trying to share refs twice with 2 different inputs. Can someone help me finish this code...So I need a ref on both dobMonth and dobYear but I can't use the same ref twice so I need to create a second one but it won't let me.

  const dobMonthInput = useRef(null)
  const dobYearInput = useRef(null)

  const {
    register
  } = useForm()

  const { ref, ...rest } = register('dobMonth', {
    required: true,
    validate: (value) => validateDate(value, getValues),
    onChange: (e) => onChange(e),
  })
  /*const { ref, ...rest } = register('dobYear', {
    required: true,
    validate: (value) => validateDate(value, getValues),
    onChange: (e) => onChange(e),
  })*/


  ....



  <input
        name="dobDay"
        type="text"
        {...register('dobDay', {
            required: true,
            validate: (value) => validateDate(value, getValues),
            onChange: (e) => onChange(e),
        })}
  />

  <input
        name="dobMonth"
        type="text"
        {...rest}
        ref={(e) => {
            ref(e)
            dobMonthInput.current = e
        }}
  />
  <input
        name="dobYear"
        type="text"
        {...rest}
        ref={(e) => {
            ref(e)
            dobYearInput.current = e
        }}
  />

I eventually need to use dobMonthInput.current.focus() and dobYearInput.current.focus()

I get the error Identifier 'ref' has already been declared for obvious reasons but I don't know how to get around it. Thanks

I'm hoping I'm close to translating my old react hook forms to RHF7 but I'm stuck trying to share refs twice with 2 different inputs. Can someone help me finish this code...So I need a ref on both dobMonth and dobYear but I can't use the same ref twice so I need to create a second one but it won't let me.

  const dobMonthInput = useRef(null)
  const dobYearInput = useRef(null)

  const {
    register
  } = useForm()

  const { ref, ...rest } = register('dobMonth', {
    required: true,
    validate: (value) => validateDate(value, getValues),
    onChange: (e) => onChange(e),
  })
  /*const { ref, ...rest } = register('dobYear', {
    required: true,
    validate: (value) => validateDate(value, getValues),
    onChange: (e) => onChange(e),
  })*/


  ....



  <input
        name="dobDay"
        type="text"
        {...register('dobDay', {
            required: true,
            validate: (value) => validateDate(value, getValues),
            onChange: (e) => onChange(e),
        })}
  />

  <input
        name="dobMonth"
        type="text"
        {...rest}
        ref={(e) => {
            ref(e)
            dobMonthInput.current = e
        }}
  />
  <input
        name="dobYear"
        type="text"
        {...rest}
        ref={(e) => {
            ref(e)
            dobYearInput.current = e
        }}
  />

I eventually need to use dobMonthInput.current.focus() and dobYearInput.current.focus()

I get the error Identifier 'ref' has already been declared for obvious reasons but I don't know how to get around it. Thanks

• javascript
• reactjs

• Your refs are already defined so you use them like this on your ponent: <ponent ref={dobYearInput}> – Tor Raswill Commented Nov 19, 2021 at 5:15
• And then you use dobYearInput.current in your functions or wherever you need to access the refed ponent – Tor Raswill Commented Nov 19, 2021 at 5:16
• dobMonth and dobYear share the same { ref, ...rest } and write the same value at the same time to the different input fields – MomasVII Commented Nov 19, 2021 at 5:23
• @MomasVII If I correctly understand what you're saying. X and Y share ref Z which in turns changes the values of element A and element B? If so, let me know and I'll begin writing a solution – Urmzd Commented Dec 1, 2021 at 22:51
• That's kind of whats happening now. Basically I can't add a second sharing of the ref to the year field because I've already done it once and I don't know how to duplicate and make it unique for each input – MomasVII Commented Dec 1, 2021 at 23:01

2 Answers 2

You have an issue with ref declaration between react hook refs which its assigned to the same input, you need to create ref but without using already assigned ref to another input.

The trick here to resolve issue:

  const dopMReg = register("dobMonth");
  const dopYReg = register("dobYear");

for example:

import React, { useRef } from "react";
import { useForm } from "react-hook-form";

export default function App() {
  const { register, handleSubmit } = useForm();
  const dobMonthInput = useRef(null);
  const dobYearInput = useRef(null);
  const onSubmit = (data) => {
    console.log(data);
    dobMonthInput.current.focus();
  }
  const dopMReg = register("dobMonth");
  const dopYReg = register("dobYear");

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        name="dobMonth"
        type="text"
        {...dopMReg}
        ref={(e) => {
          dopMReg.ref(e);
          dobMonthInput.current = e;
        }}
      />
      <input
        name="dobYear"
        type="text"
        {...dopYReg}
        ref={(e) => {
          dopYReg.ref(e);
          dobYearInput.current = e;
        }}
      />
      <button>Submit</button>
    </form>
  );
}

and this the demo url

you can use like this too:

  const dobYearInput = useRef(null)

  const {
    register
  } = useForm()

  const { ref:refDobMonth, ...restDobMonth } = register('dobMonth', {
    required: true,
    validate: (value) => validateDate(value, getValues),
    onChange: (e) => onChange(e),
  })
  const { ref:refDobYear, ...restDobYear } = register('dobYear', {
    required: true,
    validate: (value) => validateDate(value, getValues),
    onChange: (e) => onChange(e),
  })