In React, how do you pass a function as a prop?

Props, which stands for “Properties,” are parts that can only be read. It is an object that functions similarly to HTML attributes in that it stores the value of a tag’s attributes. 

It provides a method for data to be sent between components. 

They are comparable to function arguments. The component receives props in the same manner as function parameters.

Facebook created and maintains ReactJS, a front-end JavaScript library for creating user interfaces. 

We are aware that everything in ReactJS is a component, and that props are used to provide data to these components. This kind of passing in of props is excellent, but it lacks flexibility in an application. 

We cannot, for instance, allow the youngster to communicate with the parent in this manner. However, sending methods as props in ReactJS allows for this.

ParentCompnent.js  

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

To make an application more dynamic, we will do it. Additionally, let’s create an event that sends a notification each time the parent component renders. Bind the event as soon as possible to prevent “undefined” from being returned by the this keyword.

ChildComponent.js

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

Create a straightforward functional component and give it the filename ChildComponent.js. Make a straightforward button and then provide the property greetParent() to it.

Ensure that the ParentComponent imports the ChildComponent.

App.js:

import './App.css';
import React from 'react';

import ParentComponent from './components/ParentComponent';
  
function App() {
  return (
    <div className="App">
      <ParentComponent />
    </div>
  );
}
 
export default App;

Conclusion: 

Everything you needed to know about using props and dynamic data passing between components was covered in this article. For objects to be presented to the user, the use of state and props is essential. I’ve made a straightforward example to illustrate how functions can be sent down as props. This gives you the freedom to move between different components while maintaining your state in only one.