Can't access ref.current using React and Typescript

Question

Alright, I've read through every single thread and Github issue on this and couldn't find a real answer to why we can't console.log(ref.current) this on Typescript.

function App() {
  const ref = React.useRef<HTMLDivElement>(null);

  return (
    <div className="App">
      <Parent ref={ref} />
    </div>
  );
}

export default App;


const Parent = React.forwardRef<HTMLDivElement>(({}, ref) => {
  return (
    <div>
      <Child ref={ref}/>
    </div>
  );
});

export default Parent;




const Child = React.forwardRef<HTMLDivElement | null, IProps>(
  (props, ref) => {
    console.log(ref.current)
    return <div ref={ref}>Hello World</div>;
  }
);
export default Child;

I understand that ref can be null thats why it makes sense to console.log(ref?.current) but I dont understand why we can't access the current even with an if statement.

Is this answer solve your problem, stackoverflow.com/questions/62238716/… — Ritik Banger
– Ritik Banger, Commented May 7, 2022 at 14:23
@RitikBanger I dont know if that answer is outdated, but its not working anymore — ertemishakk
– ertemishakk, Commented May 7, 2022 at 14:25
In your parent component, use (ref as MutableRefObject<HTMLDivElement>).current — Ritik Banger
– Ritik Banger, Commented May 7, 2022 at 14:26

Ritik Banger · Accepted Answer · 2022-05-07 16:04:47Z

3

You need to assert the ref, use ref as MutableRefObject<HTMLDivElement> as it is not necessary for every ref to have the current property.

In your parent component, use (ref as MutableRefObject<HTMLDivElement>).current

answered May 7, 2022 at 16:04

Ritik Banger

2,8668 silver badges31 bronze badges

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

Comments

Shan · Accepted Answer · 2022-05-07 14:27:23Z

1

You can't access the the DOM node until it is mounted. Use useEffect hook to check after mount.

const Child = React.forwardRef<HTMLDivElement | null, IProps>(
    (props, ref) => {

        useEffect(()=>{
          console.log(ref.current)
      },[])
      
      return <div ref={ref}>Hello World</div>;
    }
  );

answered May 7, 2022 at 14:27

Shan

1,5684 silver badges12 bronze badges

1 Comment

ertemishakk Over a year ago

still getting the same error!

Collectives™ on Stack Overflow

Can't access ref.current using React and Typescript

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related