How to use multiple refs for an array of elements with React Hooks

Single reference

A simple <input/> element looks like:

JSX

import { useEffect, useRef, useState } from react;

const SimpleInput = () => {

    const inputRef = useRef(null);

    useEffect( () => {

        inputRef.current.focus();

    }, []);

    return(
        <div className = 'Input'>
            <input ref = {inputRef} placeholder = 'Name'></input></div>);

}

export default SimpleInput;

The <input/> will focus after DOM is loaded. If you execute console.log(inputRef):

JSX

{current: input}

inputRef is an object with a single current property.

Multiple references

But what would happen with an undetermined array of <input/>?

We need to define inputRef as an array, so that current property becomes an array as well.

JSX

import { useEffect, useRef, useState } from react;

const ArrayInputs = () => {

    // The number of references is undetermined
    // After fetching data, we can determine array's length
    const inputRef = useRef([]);

    // Data is empty before fetching
    const [data, setData] = useState([]);

    useEffect( () => {

        // We will fetch data and receive an array
        // let data = fetchData();
        // To simplify, let's suppose that the array is:
        let data = ['Name', 'Age', 'Gender'];

        // We define the size of array after receiving the data
        inputRef.current = new Array(data.length);

        // We set state
        setData(data);

    }, []);

    useEffect( () => {

        // If data is filled -> focus
        if(data.length !== 0) {

            // Focusing the last <input></input>
            inputRef.current[data.length - 1].focus();

        }

    }, [data]);

    return(

        <div className = 'Inputs'>
            {data.map((element, i) => <input ref = {el => inputRef.current[i] = el} placeholder = {element}></input>)}
        </div>

    );

}

export default ArrayInputs;

The last <input/> will focus after DOM is loaded.

If you execute console.log(inputRef):

JSX

{current: [input, input, input]}

Now, inputRef is an object with an array as current property. We can access to a single reference by writing inputRef.current[i].