How to Call Function Inside Child Component from Parent Component using useRef hook ?

In ReactJS, we can pass the function reference from parent components to child components. However, there are scenarios where you may need to call the function inside the child component from the parent component. It can be done by creating a reference using the useRef hook and createRef method as well.

Prerequisites :

• NPM & Node JS
• React JS
• React useRef Hook

Approach :

Following are the steps to call the function inside the child component from the parent component.

• In the parent component, create a useRef hook.
• Pass this reference to the child component as props.
• Use that reference in the child component wherever required.

Steps to create React Application

Step 1: Create a React application using the following command.

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Project Structure:

Example: This example demonstrate the use of useRef hook to call a parent component function inside child component by getting text input..

Javascript

// Filename - App.js:


import './App.css';
import Parent from './Parent';

function App() {
    return (
        <div>
        {/*Rendering the Parent component  */}
            <Parent />
        </div>
    );
}

export default App;

Javascript

// Filename - Parent.js:

import { useRef, useState } from 'react';
import Child from './Child';
function Parent() {
    const [name, setname] = useState("");
    const childref = useRef();

    return (
        <div style={{margin:"20px"}}>

            <div>Parent Component</div>

            {/* Displayed name which was written in
            child component input field*/}
            {name !== '' && <div>{name}</div>}

            {/* By clicking on this button, the onclick
            method will click the button in the child
            component using useRef hook*/}
            <button onClick={() => { childref.current.click() }}
             style={{ margin: "2px" }}>
             Display name
            </button>

            {/* Rendering the child component */}
            <Child reference={childref} setname={setname} />
        </div>
    )
}
export default Parent;

Javascript

// Filename - Child.js:

import { useState } from 'react';
function Child(props) {
    const [input, setinput] = useState("");

    return (
        <div style={{ marginTop: "30px" }}>

            <div>Child Component</div>
            {/*The input onchange function will set
            the input state variable*/}
            <input type="text" onChange=
                {(e) => { setinput(e.target.value) }}>
            </input>

            {/* This has reference which is
            sent by Parent as props*/}
            <button ref={props.reference}
                style={{ display: "none" }}
                onClick={() => { props.setname(input) }} >
            </button>
        </div>
    )
}
export default Child;

Steps to Run the application: Use this command in the terminal inside the project directory.

npm start

Output: This output will be visible on the http://localhost:3000/ on the browser window.