JAVASCRIPT

multiple refs react

//Give multiple refs to a single JSX Component/element in React
import React, { useRef } from "react";

const Child = React.forwardRef((props, ref) => {
  const { ref1, ref2 } = ref.current;
  console.log(ref1, ref2); 
//ref1.current will point to foo <p> element and ref2.current will point to bar <p> element

  return (
    <>
      <p ref={ref1}>foo</p>
      <p ref={ref2}>bar</p>
    </>
  );
});

export default function App() {
  const ref1 = useRef();
  const ref2 = useRef();
  const ref = useRef({ ref1, ref2 });
  
  //ref.ref1.current will point to foo <p> element and ref.ref2.current will point to bar <p> element
  return <Child ref={ref} />;
}