How To Call Child Function From Parent Component In React

One way to call a child component's function from its parent is with the help of the useRef hook.

Here's the gist of it: We pass a Ref (e.g. childFunc) to a child 🧒 component and assign the desired function to the Ref's current key. This then gives you access to that very function in the parent component.

Take a look at this interactive example:

const Parent = () => {
  const childFunc = React.useRef(null)

  return (
    <>
      <Child childFunc={childFunc} />
      <button onClick={() => childFunc.current()}>Click me</button>
    </>
  )
}

const Child = ({ childFunc }) => {
  React.useEffect(() => {
    childFunc.current = alertUser
  }, [])

  function alertUser() {
    alert('You clicked!')
  }

  return null
}

render(<Parent />)

Pay attention to how childFunc is passed down: a custom props is used instead of ref as the latter would otherwise return a DOM element.