I have Child Component Like this.

Parent => SubParent => Child

I have a function in Child Component and I need to call this function in Parent.To do this I use React Hooks. (I refer to This article to do this. Because I am a new student for reatjs.)

This is my code.

import React, {forwardRef, useRef, useImperativeHandle} from 'react';
import {Button} from '@material-ui/core';

function Parent(props) {
    const childRef = useRef();
    const addDate = () =>{
        childRef && childRef.current.submitHandler();
    };
    return (
        <div>
            {/* eslint-disable-next-line react/jsx-no-undef */}
            <Button
                onClick={addDate}>
                SAVE
            </Button>
            <SubParent ref={childRef}/>
        </div>
    );
}


function SubParent(props) {
    return (
        <div>
            <Child ref={props.ref}/>
        </div>
    );
}


const Child = forwardRef((props, ref) => {
    const submitHandler = () => {};
    useImperativeHandle(
        ref,
        () => ({
            submitHandler,
        }),
    );

    return (
        <div>Child Component</div>
    );
});

But when I press the button in Parent Component I have this error.

Error Image Link

TypeError: Cannot read properties of undefined (reading 'submitHandler')

I can't find out my error. If anyone can help me with this, I really appreciate it. Thank you very much.❤️

CodePudding user response：

I think you are on right track. However, just need to forward the ref from SubParent component too otherwise it will be attached to the SubParent component instead of Child component

Here is the codesandbox: https://codesandbox.io/s/vigorous-hooks-o5n5s?file=/src/App.js:215-780

function Parent(props) {
  const childRef = useRef();
  const addDate = () => {
    childRef && childRef.current.submitHandler();
  };
  return (
    <div>
      <Button onClick={addDate}>SAVE</Button>
      <SubParent ref={childRef} />
    </div>
  );
}

const SubParent = React.forwardRef((props, ref) => ( // check this implementation
  <div>
    <Child ref={ref} />
  </div>
));

const Child = forwardRef((props, ref) => {
  const submitHandler = () => {
    console.log("Called");
  };

  useImperativeHandle(ref, () => ({
    submitHandler
  }));

  return <div>Child Component</div>;
});

CodePudding user response：

You can't forward the ref from the default props object in the intermediate SubParent component as the ref isn't passsed this way.

from Forwarding refs to DOM components

Regular function or class components don’t receive the ref argument, and ref is not available in props either.

You'll need to apply a forwardRef() to each component between the parent and the final child.

const { forwardRef, useRef, useImperativeHandle } = React;

function Parent(props) {
  const childRef = useRef();
  const addDate = () => {
    childRef && childRef.current.submitHandler();
  };

  return (
    <div>
      <button onClick={addDate}>SAVE</button>
      <SubParent ref={childRef} />
    </div>
  );
}

const SubParent = forwardRef((props, ref) => {
  return (
    <div>
      <Child ref={ref} />
    </div>
  );
});

const Child = forwardRef((props, ref) => {
  const submitHandler = () => {
    console.log('In submit handler');
  };
  useImperativeHandle(ref, () => ({ submitHandler }));

  return <div>Child Component</div>;
});

ReactDOM.render(<Parent />, document.getElementById('root'));

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<div id="root"></div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You almost did everything, but just a point, you need to pass the forwardRef instead of ref into the SubParent:

import React, { forwardRef, useRef, useImperativeHandle } from "react";
import { Button } from "@material-ui/core";

function Parent(props) {
  const childRef = useRef();
  const addDate = () => {
    console.log("from parent component");
    childRef?.current?.submitHandler();
  };
  return (
    <div>
      <Button onClick={addDate}>SAVE</Button>
      <SubParent forwardRef={childRef} />
    </div>
  );
}

function SubParent(props) {
  return (
    <div>
      <Child ref={props.forwardRef} />
    </div>
  );
}

const Child = forwardRef((props, ref) => {
  const submitHandler = () => {
    console.log("from child component");
  };
  useImperativeHandle(ref, () => ({
    submitHandler: submitHandler
  }));

  return <div>Child Component</div>;
});

export default Parent;

Try on codesandbox