React - Create multiple useRefs in one line using object or array - reactjs

Question

I want to declare multiple useRefs and have them all in 1 object or an array. If that's not possible, then any means of declaring multiple refs in one line, like array destructuring
I tried these so far, neither worked.
attempt 1
const inputRefs = useRef({ input1: null, input2: null, input3: null, input4: null })
function focusInput() {
inputRefs.input2.current.focus()
}
return (
<div>
<input type="text" ref={inputRefs.input1} />
<input type="text" ref={inputRefs.input2} />
<input type="text" ref={inputRefs.input3} />
<input type="text" ref={inputRefs.input4} />
<button onClick={focusInput}>focus</button>
</div>
)
attempt 2
const [input1, input2, input3, input4] = Array(4).fill(useRef(null))
function focusInput() {
input2.current.focus()
}
return (
<div>
<input type="text" ref={input1} />
<input type="text" ref={input2} />
<input type="text" ref={input3} />
<input type="text" ref={input4} />
<button onClick={focusInput}>focus</button>
</div>
)
note I only have 4 inputs in the example, but in reality I have much more so hence I want to find a way. Thanks

Answer 1

You can set ref on your inputs wrapper and work with inputs through DOM API.
const containerRef = useRef(null);
function focusInput() {
const containerNode = containerRef.current;
containerNode.childNodes[2].focus();
}
return (
<div ref={containerRef}>
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<button onClick={focusInput}>focus</button>
</div>
)

Answer 2

Few things to correct.
The useRef is a react hook (which should be defined in the top level of the function). Therefore, to create refs and store them in an array, you should use createRef.
Array.fill does not create 4 new refs instead of that share a single ref. That's why even though you clicked on the button always last input is always referred to. To get rid of that, use Array.from like below.
import { createRef } from "react";
export default function App() {
const [input1, input2, input3, input4] = Array.from({ length: 4 }, () =>
createRef(null)
);
function focusInput() {
input2.current.focus();
}
return (
<div>
<input type="text" ref={input1} />
<input type="text" ref={input2} />
<input type="text" ref={input3} />
<input type="text" ref={input4} />
<button onClick={focusInput}>focus</button>
</div>
);
}

Answer 3

kk I found a similar way to my first one but it works. Further suggestions are also welcome
import { useRef } from "react";
export default function App() {
const inputRefs = {input1: useRef(null), input2: useRef(null), input3: useRef(null), input4: useRef(null)}
function focusInput() {
inputRefs.input2.current.focus();
}
return (
<div>
<input type="text" ref={inputRefs.input1} />
<input type="text" ref={inputRefs.input2} />
<input type="text" ref={inputRefs.input3} />
<input type="text" ref={inputRefs.input4} />
<button onClick={focusInput}>focus</button>
</div>
);
}

Answer 4

You can simply use react-use-refs it used a clever generator to create how many useRef you need.
import useRefs from "react-use-refs";
function Demo() {
const [someRef, anotherRef] = useRefs();
return (
<div>
<div ref={someRef}>someRef</div>
<div ref={anotherRef}>anotherRef</div>
</div>
)
}
Or you can implement one yourself
import {useRef} from "react";
const MAX_ITERATIONS_COUNT = 50;
function iterator() {
return this;
}
export default function useRefs(...args) {
let count = 0;
return {
next() {
if (++count > MAX_ITERATIONS_COUNT) {
throw new Error(
"useMultipleRefs: reached more than 50 refs. This hook can be used exclusively with the array destructuring syntax."
);
}
return {
done: false,
value: useRef(args[count - 1] ?? args.at(-1)),
};
},
[Symbol.iterator]: iterator,
};
}
Or using my version from that collection here npm i #perymimon/react-hooks
import {useRefs} from #perymimon/react-hooks
// or
import useRefs from #perymimon/react-hooks/src/useRefs