How can I use multiple refs for nested arrays of elements with hooks, or any other way

Question

First of all, I've found the solution here, which works great with a single array of elements. But my question is regarding the nested arrays of components. For example:

const { useRef, useState, useEffect } = React;

const arr1 = [A, B, C]
const arr2 = [1, 2, 3]

const App = () => {
  const popoverRefs = useRef([]);

  return (
    <div>
      {arr1.map((parentItem, index) => {
        return(
          <div>
            A Parent Element {parentItem.label}
            {arr2.map((childItem, index2) => {
              return (
                <div ref={????}>
                  A Child Element {childItem.label}     
                </div>
              )
             })}
          </div>
        )
      })}
    </div>
  );
};

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

In this example how can I use useRef or createRef to get the reference for each parent's child separately, so that I can use those references to anchor some other view for example a popover.

score 1 · Answer 1 · answered Jun 12 '22 at 08:11

There are many other ways I manage same case using object

popoverRefs.current will look like
{
  0: [],
  1: [],
  2: [],
};

const {useRef, useState, useEffect} = React;

const arr1 = [A, B, C];
const arr2 = [1, 2, 3];

const App = () => {
  const popoverRefs = useRef(
    arr1.reduce((result, current, currentIndex) => {
      result[current] = [];
      return result;
    }, {}),
  );

  return (
    <div>
      {arr1.map((parentItem, index) => {
        return (
          <div>
            A Parent Element {parentItem.label}
            {arr2.map((childItem, index2) => {
              return (
                <div ref={ref => (popoverRefs.current[index][index2] = ref)}>
                  A Child Element {childItem.label}
                </div>
              );
            })}
          </div>
        );
      })}
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

I used the other approach of creating a new component, thanks for the help though! — Parag Pawar, Jun 12 '22 at 09:52

SSM · Accepted Answer · 2022-06-12T08:21:34.300

You can extract the child into a separate component and create the ref there.

const { useRef, useState } = React;

const arr1 = ["A", "B", "C"];
const arr2 = [1, 2, 3];

const Child = ({ childItem }) => {
  const liRef = useRef();
  const handleClick = () => {
    liRef.current.classList.toggle("highlight");
  };
  return (
    <div ref={liRef}>
      A Child Element {childItem}{" "}
      <button onClick={handleClick}>Highlight</button>
    </div>
  );
};

const App = () => {
  return (
    <div>
      {arr1.map((parentItem, index) => {
        return (
          <div key={index}>
            <strong>A Parent Element {parentItem}</strong>
            {arr2.map((childItem, index2) => {
              return <Child childItem={childItem} key={index2}></Child>;
            })}
          </div>
        );
      })}
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

.highlight {
  background: yellow;
  color: red;
}

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="root"></div>

Thanks, man, such an easy one, I couldn't believe I missed that. — Parag Pawar, Jun 12 '22 at 09:46

How can I use multiple refs for nested arrays of elements with hooks, or any other way

2 Answers2