ReactJS | Methods as Props

ReactJS is a front-end JavaScript library for building user interfaces written and maintained by Facebook. We know that everything in ReactJS is a component and to pass in data to these components, props are used. Although passing in props like this is great, it surely lacks flexibility in an application. For example, we cannot let the child communicate with the parent through this way. This, nonetheless, can be done by passing methods as props in ReactJS

To use a method as a props all the steps are described below order wise:

Step 1: To do this let’s make a new component named ParentComponent.js. Now let’s make the basic layout for a class component in this file.

ParentCompnent.js:

Javascript



filter_none

edit
close

play_arrow

link
brightness_4
code

import React, { Component } from 'react';
  
class ParentComponent extends Component {
    render() {
        return (
            <div>
                     
            </div>
        )
    }
}
  
export default ParentComponent;

chevron_right


Ste 2: Now let’s set a state to greet our parent whenever this component is rendered, setting a state is not necessary, but we will do it just to make an application more dynamic. Also, let’s make an event that gives an alert whenever the parent component is rendered. Do not forget to bind the event so that the this keyword won’t return “undefined“. 

ParentComponent.js:

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

import React, { Component } from 'react';
  
class ParentComponent extends Component {
    constructor(props) {
        super(props)
      
        this.state = {
            parentName:'Parent'
        }
  
        this.greetParent = this.greetParent.bind(this)
    }
      
    greetParent() {
        alert(`Hello ${this.state.parentName}`)
    }
  
    render() {
        return (
            <div>
                      
            </div>
        )
    }
}
  
export default ParentComponent;

chevron_right


Step 3: Let’s not forget to import this into our App.js file.

App.js:

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

import './App.css';
import React from 'react';
   
// imports component
import ParentComponent from './components/ParentComponent';
   
function App() {
  return (
    <div className="App">
      <h1>-----------METHODS AS PROPS-------------</h1>
      <ParentComponent />
   
    </div>
  );
}
  
export default App;

chevron_right


 
Step 4: Now let’s make a new component. Let’s call this ChildComponent.js, and make a simple functional component. Let’s make a simple button, and then pass the method greetParent() as a property. Essentially, the button must greet the parent when it is clicked.

ChildComponent.js:



Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

import React from 'react';
  
function ChildComponent(props) {
    return (
        <div>
            <button onClick={() => props.greetHandler()}>
             Greet Parent
            </button>    
        </div>
    )
}
  
export default ChildComponent;

chevron_right


 
Ste 5: Don’t forget to import the ChildComponent in ParentComponent. So the final code for ParentComponent will be as follows.

ParentComponent.js:

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

import React, { Component } from 'react';
import ChildComponent from './ChildComponent';
  
class ParentComponent extends Component {
    constructor(props) {
        super(props);
       
        this.state = {
            parentName:'Parent'
        }
   
        this.greetParent = this.greetParent.bind(this)
    }
       
    greetParent() {
        alert(`Hello ${this.state.parentName}`)
    }
   
    render() {
        return (
            <div>
                <ChildComponent greetHandler={this.greetParent}/>
            </div>
        )
    }
}
  
export default ParentComponent;

chevron_right


Output:

react-js-img




My Personal Notes arrow_drop_up

I’m a computer science student with a passion for data science, artificial intelligence and video game development

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.