I was wondering if it were possible to call a child's function inside the parent?

For example, can I use useRef to create a reference to the child and then call the function like that? Or is there another way?

// Parent
const init = () => {
const childRef = useRef();
childRef.current.child();
}

// Child
const init = () => {
function child() {

}
}

I was wondering if it were possible to call a child's function inside the parent?

For example, can I use useRef to create a reference to the child and then call the function like that? Or is there another way?

// Parent
const init = () => {
const childRef = useRef();
childRef.current.child();
}

// Child
const init = () => {
function child() {

}
}

• javascript
• reactjs

• can you please add few more codes related to parent and child, and when you need to call the child function? – Kalhan.Toress Commented Oct 9, 2020 at 4:16
• your idea is correct. using ref and useImperativeHandle hook you can achieve this – Sujit.Warrier Commented Oct 9, 2020 at 4:21
• Does this answer your question? Call child method from parent – pmiranda Commented Oct 9, 2020 at 4:24
• Check this out, stackblitz./edit/react-lzwpez – Kalhan.Toress Commented Oct 9, 2020 at 4:24
• Can I pass down data like this to the child? -> callChildFn(dataDown, wallArr, scene); – Papi Commented Oct 9, 2020 at 4:37

5 Answers 5

So you need to use useImperativeHandle hook and wrap the child in forwardRef Hoc. useImperativeHandle gives access to functions which are written inside it to the parent ponent.

  const Child = forwardRef((props,ref)=>{
     useImperativeHandle(ref, () => ({
        test: () => {
           //do something
        }
     }));
    });

in parent

const childRef= useRef();
<Child ref={childRef} />

Execute test function

childRef.current.test();

By using ref you can point it out to a function too,

parent ponent,

export default function App() {
  const childFnRef = useRef(null);
  const callChildFn = () => {
    if (childFnRef?.current) {
      childFnRef.current("valueOne", "valueTwo", "valueThree");
    }
  }
  return (
    <div>
      <h1>Parent ponent</h1>
      <ChildComponent ref={childFnRef} />
      <button onClick={callChildFn}>call child fn</button>
    </div>
  );
}

child ponent

//Ref forwarding is an opt-in feature that lets some ponents take a ref they receive,
//and pass it further down (in other words, “forward” it) to a child.
const ChildComponent = forwardRef((props, ref) => {
  const childFn = (paramOne, paramTwo, paramThree) => {
    console.log("calling child fn... params are: ", paramOne, paramTwo, paramThree);
  };

  ref.current = childFn;

  return (
    <h2>child ponent</h2>
  );
})

demo

When you use useRef you must have current after function. Like this

const childRef = useRef();
childRef.current.child();

An example in document: https://reactjs/docs/hooks-reference.html#useref

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

Yes, but only if the child ponent is class ponent.

Because functional ponent does not have an instance.

Let's say your child ponent is a class-based then you just need to have a createRef() inside parent and then pass that to the child.

Then, you can collect that instance from .current property of the ref and then trigger it.

Example,

Parent Component's constructor

this.childRef = React.createRef();

Parent Component's render

 render() {
return <ChildComponent ref={this.childRef} />
}

Child Component

class ChildComponent extends React.Component {
    constructor(props) {
       super(props);
    }

    doSomeThing = () => {}

And then at any event handler, you can execute child function as this.childRef.current.doSomeThing();

Reference: https://reactjs/docs/refs-and-the-dom.html#accessing-refs

May be someone looking for functional ponent. Here is heck without forwardRef and imperative Handler.

In Parent create child Ref like this, const childRef = useRef()

In Child give ref passed from parent => ChildComponent ref={childRef} />

And finally in Parent use like this, childRef.current.goToIndex({index:1)}