Sending props from child to parent in React js

In this tutorial,we are going to pass props from parent component to child component.In order to done this,we just need to pass a function as a prop from the parent component to the child component, and the child component calls that function.
In this example, we will change the Parent state by passing a function to the Child component and invoking that function inside the Child component.

contianer.js file is displayed below

1import React from "react";
2  class Parent extends React.Component {
3    constructor(props) {
4      super(props);
5      this.state = { childMsg: null };
6      this.outputEvent = this.outputEvent.bind(this);
7    }
8    outputEvent(childMsg) {
9      // the event context comes from the Child
10      this.setState({ childMsg: childMsg });
11    }
12    render() {
13      return (
14        <div>
15          Message from child or Props from child: {this.state.childMsg} <br />
16          <Child clickHandler={this.outputEvent} />
17        </div>
18      );
19    }
20  }
21  class Child extends React.Component {
22    render() {
23      return (
24        <button onClick={() => this.props.clickHandler("Hello World")}>
25          Add One More
26        </button>
27      );
28    }
29  }
30  export default Parent;