React.js – Methods as Props

In an earlier lesson, we covered how to pass values from parent to child components using props. In this tutorial, we would see how a child component can pass data to parent components.

In this case, methods are passed as props. We will illustrate with an example. But first, let’s review props a bit.

1. Recap of Props
2. Pass Methods as Props
3. Passing Parameter to Parent Component

1. Recap of Props

When a parent component loads a child component, it can pass props using attributes. For instance, in the code below, the parent component passes the props, name to the child component.

    <div className="App">
        <ChildCompoent name="Kindson"></ChildCompoent>
    </div>

Then in the child component,  the props can be retrieved using props.name, like so

    <div>
        <h1>Hello {props.name}</h1>
    </div>

This markup would display the text “Hello Kindson” on the browser.

2. Passing Methods as Props

This allows the child to pass data to the parent. Just like before, the parent would have to pass props to the child component. However, the parent passes a reference to a method as props to the child component.

Let’s take an example. In this example, the child component would have a button. When this button is clicked, it would execute a method in the parent component. The complete ParentComponent.js is shown below:

import React, { Component } from 'react'
import ChildComponent from '../ChildComponent';

class PerentComponent extends Component {
    constructor(props) {
        super(props)
    
        this.state = {
             parentName: 'Parent'
        }

        this.greetParent = this.greetParent.bind(this)
    }

    // Child component now can access this method
    greetParent(){
        alert('Hello: ' + this.state.parentName);
    }
    
    render() {
        return (
            <div>
                {/* We pass a reference to a method as props to the child component
                greetHander will now be available to the child component */}
                <ChildComponent greetHandler={this.greetParent}></ChildComponent>
            </div>
        )
    }
}

export default PerentComponent

In the child component, the method can be called using props.greetHandler. The complete child component is given below:

import React from 'react'

function ChildComponent(props) {
    return (
        <div>
            <button onClick={props.greetHandler}>Greet Parent</button>
        </div>
    )
}

export default ChildComponent

Note from the above code that props is passed as parameter to the component.

3. Passing Parameter From Child to Parent

At this point, we can now pass a parameter across to the parent. The easiest way to do this is to use an arrow function in the click event. So the button click event now becomes:

<div>
    <button onClick={() => props.greetHandler('Child')}>Greet Parent</button>
</div>

We can now receive this parameter in the greetParent() function in the parent component. So the function is modified as:

// The parameter is recieved as childName
greetParent(childName){
    alert('Hello from ' + childName);
}

If you launch the app now, you’ll see it works as expected.