useRef for element in loop in react

Using React, i have a list of ref statically declared this way:

  let line1 = useRef(null);
  let line2 = useRef(null);
  let line3 = useRef(null);
  ...
  //IN MY RENDER PART
  <li ref={(el) => (line1 = el)}>line1</li>
  <li ref={(el) => (line2 = el)}>line1</li>
  <li ref={(el) => (line3 = el)}>line1</li>

the refs are then passed to an animation function and everything works correctly; now things changed a bit and i create the list item using map and im no longer able to ref the element correctly; i tried something like:

{menu.menu.map((D) => {
let newRef = createRef();
                    LiRefs.push(newRef);
                    return (
                      <li
                        key={D.id}
                        ref={(el) => (newRef = el)} >
                        {D.label}
                      </li>
                    );
                  })}

but the array i pass to the animation function is empty (i guess because the function is called inside useEffect hook and LiRefs is not yet a useRef) i also know the number of

ref={(el) => (`line${i}` = el)}

Solution 1:

Issue

This won't work as each render when menu is mapped it creates new react refs.

Solution

Use a ref to hold an array of generated refs, and assign them when mapping.

const lineRefs = React.useRef([]);

lineRefs.current = menu.menu.map((_, i) => lineRefs.current[i] ?? createRef());

later when mapping UI, attach the react ref stored in lineRefs at index i

{menu.menu.map((D, i) => {
  return (
    <li
      key={D.id}
      ref={lineRefs.current[i]} // <-- attach stored ref
      {D.label}
    </li>
  );
})}

Solution 2:

Mine is React Hooks version.

useMemo to create an array of refs for performance sake.

const vars = ['a', 'b'];
const childRefs = React.useMemo(
    () => vars.map(()=> React.createRef()), 
    [vars.join(',')]
);

React will mount each ref to childRefs

{vars.map((v, i) => {
    return (
        <div>
             <Child v={v} ref={childRefs[i]} />
             <button onClick={() => showAlert(i)}> click {i}</button>
        </div>
    )
 })
}

Here is a workable demo, hope that helps. ^_^

const Child = React.forwardRef((props, ref) => {

  React.useImperativeHandle(ref, () => ({
    showAlert() {
      window.alert("Alert from Child: " + props.v);
    }
  }));

  return <h1>Hi, {props.v}</h1>;
});

const App = () => {
  const vars = ['a', 'b'];
  const childRefs = React.useMemo(
    () => vars.map(()=> React.createRef()), 
    // maybe vars.length
    [vars.join(',')]
  );
  function showAlert(index) {
    childRefs[index].current.showAlert();
  }
  
  return (
    <div>
      {
        vars.map((v, i) => {
          return (
            <div>
              <Child v={v} ref={childRefs[i]} />
              <button onClick={() => showAlert(i)}> click {i}</button>
            </div>
          )
        })
      }
    </div>
  )
}


const rootElement = document.getElementById("root");
ReactDOM.render(
  <App />,
  rootElement
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Solution 3:

There may be some Typescript inconsistencies and complexity in other answers. So I think the best way to use the useRef hook for a loop is:

// Declaration
const myRef = useRef([]);
myRef.current = [];
const addToRefs: (el) => void = (el) => {
  if (el && !myRef.current.includes(el)) {
    myRef.current.push(el);
  }
};

And

// Assignment (I will show an example for an input element)
...
...
{anyArrayForLoop.map((item, index) => {
   return (
       <input
           key={index}
           ref={addToRefs}
       />
   );
})}
...
...

Final:

// The Data
myRef.current // So you got em.