How to call the child component function from the parent component in React
Tags: react, hooks
Published: 2021-10-15 05:04:00

When you need to call a function declared in the parent component from a child component, it is as easy as passing it as a prop to the child component and calling it from the child component.
However, when you want to call the other way around, things can be a bit tricky. In this article, we will see how to the call child component function from the parent component.

Consider the following example:

```jsx
const ChildComp = () => {
  function showAlert() {
    alert("Hello from Child Component")
  }
  return <div></div>
}

function App() {
  return (
    <div>
      <button>Click Me</button>
      <ChildComp />
    </div>
  )
}

export default App
```

Here we have a parent component with a button and a child component with a function to show an alert. If you want to call the `showAlert` function when the button is clicked, there is no direct way to access it.

Let's add a reference to the child component in the parent component using `useRef` hook.

```jsx
import { useRef } from "react"

const ChildComp = () => {
  function showAlert() {
    alert("Hello from Child Component")
  }
  return <div></div>
}

function App() {
  const childCompRef = useRef()
  return (
    <div>
      <button>Click Me</button>
      <ChildComp ref={childCompRef} />
    </div>
  )
}

export default App
```

Now if you run the application and see, you will get the following warning in the console:

`Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?`

![forwardRef warning](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lo5cw041ftidnt38g0cg.png)

How to fix this? As the warning itself suggests, we need to use `forwardRef` to enclose the child component.

```jsx
import { forwardRef, useRef } from "react"

const ChildComp = forwardRef((props, ref) => {
  function showAlert() {
    alert("Hello from Child Component")
  }
  return <div></div>
})

function App() {
  const childCompRef = useRef()
  return (
    <div>
      <button>Click Me</button>
      <ChildComp ref={childCompRef} />
    </div>
  )
}

export default App
```

When we enclose the child component with `forwardRef`,
it receives a second parameter apart from props, which is the ref passed from the parent component.

Now with the help of this ref, we can specify which functions can be accessed by the parent component.
This can be done using `useImperativeHandle` hook, as shown below:

```jsx
import { forwardRef, useRef, useImperativeHandle } from "react"

const ChildComp = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    showAlert() {
      alert("Hello from Child Component")
    },
  }))
  return <div></div>
})

function App() {
  const childCompRef = useRef()
  return (
    <div>
      <button>Click Me</button>
      <ChildComp ref={childCompRef} />
    </div>
  )
}

export default App
```

`useImperativeHandle` hook accepts 2 mandatory parameters,
the first is the reference and the second is the initialization function, to which we can pass our `showAlert` declaration.

Finally, let's bind the click event of the button with the `showAlert` function:

```jsx
import { forwardRef, useRef, useImperativeHandle } from "react"

const ChildComp = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    showAlert() {
      alert("Hello from Child Component")
    },
  }))
  return <div></div>
})

function App() {
  const childCompRef = useRef()
  return (
    <div>
      <button onClick={() => childCompRef.current.showAlert()}>Click Me</button>
      <ChildComp ref={childCompRef} />
    </div>
  )
}

export default App
```

Now if you run the application and click on the button, you should be able to see the alert:

![alert](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qsfvx0i3i35hindab4da.png)

You can view the source code [here](https://github.com/collegewap/react-call-child-parent).