How to add Array/multiple refs to one useRef() hook in React Js?

In this article, we will see how to add the array of refs or the multiple refs to one useRef() hook in React.js. A common practice seen in React apps is mapping of data with an array. When we have large arrays of data and we have to do some same operation/display that array on our page, we usually prefer using mapping as that comes in handy.

Here we have turned the array into JSX component. There might be many reasons why we want to retain a ref to every mapped element in the application. For instance we use scrollIntoView() function provided by React.js or maybe we have multiple inputs that we have rendered based on the array elements and we want to handle the focus of each of rendered inputs so this is something where you will considering using the Array of Refs in your React JS web app. In the below code we have used our mapping function to add references to our ref() function and passed all the references to array of refs.

Array of Refs – React Js

Basic Code / Boilerplate

import React, { useRef } from "react";

export default function App() {
  const arr = [1, 2, 3, 4];

  const refs = useRef([]);

  return (
    <div className="App">
      {arr.map((item, index) => {
        return (
          <div
            key={index}
            ref={(element) => {
              refs.current[index] = element;
            }}
          >
            {item}
          </div>
        );
      })}
    </div>
  );
}

Dynamic Click Handling for Multiple Input using Ref – Example

import React, { useRef } from "react";

export default function App() {
  const ref = useRef([]);

  const handleClickRef = (id) => {
    ref.current[id].focus();
  };

  const arr = [
    {
      id: "ID1",
      description: "First Input"
    },
    {
      id: "ID2",
      description: "Second Input"
    }
  ];

  return (
    <div className="App">
      {arr.map((item, index) => {
        return (
          <div key={index}>
            <input
              ref={(element) => {
                ref.current[item.id] = element;
              }}
              id={item.id}
              placeholder={item.description}
            />
          </div>
        );
      })}

      <br />

      {arr.map((item, index) => {
        return (
          <button
            key={index}
            onClick={(e) => {
              e.preventDefault();
              handleClickRef(item.id);
            }}
            style={{
              background: "#000000",
              color: "#ffffff",
              marginRight: "10px"
            }}
          >
            Focus Input {item.description}
          </button>
        );
      })}
    </div>
  );
}

How to target a Ref from Multiple Refs?

And we target single elements using regular and usual syntax. The code for the will be similar to the normal array for getting the reference based on the index:

Example 1:
refs.current[0] //<div>1</div>

Example 2:
refs.current[2].scrollIntoView();

Hope you have understood all that we have explained in this article about having multiple references with useRef hook. Comment below for any doubts that you come across. We are happy to help.