Articles → REACT.JS → Raise an event from parent component and handle the event from child component in react.js

Raise an event from parent component and handle the event from child component in react.js






Example




Picture showing the flow how the events are handled in parent and child component

Click to Enlarge



import React, { Component } from 'react';
import ReactDOM from 'react-dom'

class ChildComponent extends React.Component {
   

    render() {
        return (
            <div>
                <button onClick={this.props.onClick}>Click Me</button>
            </div>
        );
    }
}

class ParentComponent extends React.Component {

    handleClick = () =>{
        alert("Button clicked");
    };

    render() {
        return (
                <ChildComponent onClick={this.handleClick}>
                </ChildComponent>
        );
    }
}

ReactDOM.render(<ParentComponent />, document.getElementById('root'));




Picture showing the output of how to raise an event from parent component and handle the event from child component in react.js

Click to Enlarge


Posted By  -  Karan Gupta
 
Posted On  -  Wednesday, August 11, 2021

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250