Forward Reference

  • Pass the reference to child component

import react, {
  useRef,
  Fragment
} from "react";
import Son from "./Son";


const Mother = () => {
  const motherRef = useRef();
  return (
      <Fragment>
          <button onClick={() => {
            motherRef.current.focus();
            console.log(motherRef.current);
            }}/> 
          <Son
              ref = {motherRef}
          />
      </Fragment>
  )
};
export default Mother;
import react, {forwardRef, Fragment } from "react";
const Son = forwardRef(({}, ref) => {
    return (
        <Fragment>
            <input ref = {ref}/>
        </Fragment>
    )   
})

export default Son;

Last updated

Was this helpful?