💸 Methods as Props

Methods as Props

README.md

@@ -187,3 +187,5 @@ class ClassClick extends Component {
 
 export default ClassClick;
 ```
+
+### [Binding Event Handlers](https://github.com/SaishJ/React-JS-Beginner-to-Advanced/commit/6999a5a35a3c163f62a3918ce5e47ebeb38d02dc#diff-d8e2fd228629da81ebb95e75620e3bff49619c19c32244fdeea37f9b0b365ec7)

src/App.js

@@ -7,11 +7,13 @@ import Counter from "./components/counter";
 import FunctionClick from "./components/FunctionClick";
 import ClassClick from "./components/ClassClick";
 import EvenBind from "./components/EventBind";
+import ParentComponent from "./components/ParentComponent";
 
 function App() {
   return (
     <div className="App">
-      <EvenBind />
+      <ParentComponent />
+      {/* <EvenBind /> */}
       {/* <FunctionClick /> */}
       {/* <ClassClick /> */}
       {/* <Counter /> */}

src/components/ChildComponent.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+function ChildComponent(props) {
+  return (
+    <div>
+      <button onClick={() => props.greetHandler("child")}>Greet Parent</button>
+    </div>
+  );
+}
+
+export default ChildComponent;

src/components/ParentComponent.js

@@ -0,0 +1,28 @@
+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(childName) {
+    alert(`Hello ${this.state.parentName} from ${childName}`);
+  }
+
+  render() {
+    return (
+      <div>
+        <ChildComponent greetHandler={this.greetParent} />
+      </div>
+    );
+  }
+}
+
+export default ParentComponent;