Access ref from class component in functional component with React

Question

I have a class component in React with a ref and I want to access it within a functional component inside of it. I tried passing the ref as a prop, but then it says that it's undefined. So then I tried accessing it with this.refs but it's undefined too.

function GetOffset() {
  const [offset, setOffset] = useState(0);
  useEffect(() => {
    function handleScroll() {
      
    console.log(this.refs);
      
  }, [offset]);
}

I want to use getBoundingClientRect() to check an offset of an element but first I need to access the ref from inside this component.

I read that using a class component would work, but I need the useEffect() hook. Any tips?

Adam Jenkins · Accepted Answer · 2020-10-08 13:04:00Z

1

useRef

const MyFunctionalComponent = () => {
   const ref = useRef();
   const [offset, setOffset] = useState(0);
   useEffect(() => {
      // access ref.current
   },[offset]);
   
   return <MyClassComponent ref={ref}/>
}

answered Oct 8, 2020 at 13:04

Adam Jenkins

56.3k13 gold badges85 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tomás Nicolorich Over a year ago

I can't thank you enough!!! I tried useRef before but it looks like I was doing it wrong

Collectives™ on Stack Overflow

Access ref from class component in functional component with React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related