useRef for element in loop in react

Question

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

i will create, so i can declare them at the beginning and the reference with something like

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

which is not working any other solution i could try?

Answer 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>
  );
})}

Answer 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>

Answer 3

There may be some Typescript inconsistencies and complexity in other answers. So I think the best way to use the useRef hook in 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 (input element example)
...
...
{anyArrayForLoop.map((item, index) => {
   return (
       <input
           key={index}
           ref={addToRefs}
       />
   );
})}
...
...

Final:

// The Data
myRef.current

Answer 4

Instead of storing refs in an array, you could create a ref for each component within the loop. You can also access that ref in the parent component by a function.

You could do something similar to this.

const { useRef, useState } = React;

const someArrayToMapStuff = ["a", "b", "c"];

const ListWithRef = ({ text, setDisplayWhatsInsideRef }) => {

  const ref = React.useRef(null);
  
  const logAndDisplayInnerHTML = () => {
    setDisplayWhatsInsideRef(ref.current.innerHTML);
    console.log(ref.current);
  };
  
  return (
    <li 
      ref={ref}
      onClick={logAndDisplayInnerHTML}
    >
      <button>{text}</button>
    </li>
  );
  
};

const App = () => {

  const [displayWhatsInsideRef, setDisplayWhatsInsideRef] = useState("");

  return (
    <ul>
      {someArrayToMapStuff.map(thing => <ListWithRef 
        key={thing} 
        text={thing} 
        setDisplayWhatsInsideRef={setDisplayWhatsInsideRef}
      />)}
      
      {displayWhatsInsideRef && (
        <h1>Look, I'm a ref displaying innerHTML: {displayWhatsInsideRef}</h1>
      )}
    </ul>
  );
};

ReactDOM.createRoot(
    document.getElementById("root")
).render(<App />);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>

Hopefully this helps someone.