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

Question

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?

Answer 1

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) => {