React ref is only updating one instance

Question

Got an interesting problem withs refs.

I'm mapping over a component and rendering it multiple times and passing a ref to each one

const ref = useRef()

{data.map(d) => (
  <Component
    {...lotsOfOtherProps}
    ref={ref}
  />
)}

Then in a grandchild component I have:

  const anotherRef = React.useRef()
  useImperativeHandle(ref, () => ({
    reset: () => {
      anotherRef?.current.reset()
    },
  }))

In this component I have a button and when I toggle it I call

anotherRef?.current?.reset() and this works and does what I want

but I'm wondering when I click a "reset all" button, how I can get all the refs to reset?

Answer 1

You are replacing the ref with each iteration and finally assigning it to the last element. You need to create an array of refs.

const refs = [];

{
  data.map((d, index) => {
    const newRef = React.createRef();
    refs[index] = newRef;
    return <Component {...lotsOfOtherProps} ref={newRef} />;
  });
}

refs will contain the array of ref for each component created from data array.