CODEWITHSUNDEEP
reactjsparent-child
Davtho1983
Davtho1983

Reputation: 3954

Can't access child function from parent function with React Hooks

I need to call a function in a child component from a parent component with React Hooks.

I was trying to adapt this question to my use case React 16: Call children's function from parent when using hooks and functional component but I keep getting the error

TypeError: childRef.childFunction is not a function

My parent component is like this:

import React, { useRef, useEffect } from 'react';
import Child from './child'

function Parent() {
    const parentRef = useRef()
    const childRef = useRef()

    const callChildFunction = () => {
        childRef.current(childRef.childFunction())
    }

    useEffect(() => {
        if (parentRef && childRef) {
            callChildFunction();
        }
    }, [parentRef, childRef])

    return (
        <div ref={parentRef} className="parentContainer">
            PARENT
            <Child ref={childRef}/>
        </div>
    );
}

export default Parent;

My child component is like this:

import React, { forwardRef, useImperativeHandle } from 'react';

const Child = forwardRef(({ref}) => {
    useImperativeHandle(ref, () => ({
        childFunction() {
            console.log("CHILD FUNCTION")
        }
      })); 

    return (
        <div className="childContainer">
            CHILD
        </div>
    );
})

export default Child;

What am I doing wrong?

Upvotes: 0

Views: 1309

Answers (1)

Diesel
Diesel

Reputation: 5335

I think this is your problem

    childRef.current(childRef.childFunction())

childRef.current isn't a function. Also childRef.childFunction() is run first, which also isn't a function.

childRef.current.childFunction should be a function, try childRef.current.childFunction() instead of childRef.current(childRef.childFunction())

From the docs on useImperativeHandle check out the usage of inputRef.current.focus():

function FancyInput(props, ref) {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
  return <input ref={inputRef} ... />;
}
FancyInput = forwardRef(FancyInput);

In this example, a parent component that renders <FancyInput ref={inputRef} /> would be able to call inputRef.current.focus().

Edit based on comment for future visitors:

const Child = forwardRef(({ref}) => {

should be 

const child = forwardRef(({}, ref) => {

Upvotes: 1

Related Questions