Access DOM element in a child component in React

Tue, 18 Aug 2020 06:45:01 +0000

Sometimes we need access a DOM element which is contained by another React component. If we try to just use ref and pass it to the child component, we get an error.

function ChildComponent(props) {
  return <div ref={props.ref}>Hello there!</div>;
}

export default function App() {
  const childRef = React.useRef();

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

This is because ref is a reserved prop name so you can’t pass it to a child component. Instead we can use forwardRef when defining the child component.

Ref on dev notes

Access DOM element in a child component in React