Breaking News: Grepper is joining You.com. Read the official announcement!

multiple refs react

coder_king answered on July 26, 2022 Popularity 10/10 Helpfulness 2/10

answer multiple refs react

related react multiple refs to a single component

multiple refs react

Comment

//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} />;
}

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: thewebdev.info

Tags: javascript refs

Link to this answer
Share Copy Link

Contributed on Jul 26 2022

coder_king

0 Answers Avg Quality 2/10

Closely Related Answers

react multiple refs to a single component

Comment

function App() {
  const myRef = useRef(null)
  const anotherRef = useRef(null)

  return (
    <div ref={(el) => { myRef(el); anotherRef(el) }} />
  )
}

Popularity 9/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Nov 28 2022

Mateusz Drewniak

0 Answers Avg Quality 2/10

multiple refs react

Contents

More Related Answers

multiple refs react

Closely Related Answers

react multiple refs to a single component

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.