🔀 Render Props

Render Props

README.md

@@ -222,7 +222,7 @@ export default ClassClick;
 
 ### [Error Boundary](https://github.com/SaishJ/React-JS-Beginner-to-Advanced/commit/83c11fa8ef5b3c7cf3a0a71495993ea9fed97053)
 
-### [Higher Order Component]()
+### [Higher Order Component](https://github.com/SaishJ/React-JS-Beginner-to-Advanced/commit/1d7a9019dce79ea77fd420d25f5cd409392fb84d)
 
 ```jsx
 import React from "react";
@@ -238,3 +238,5 @@ const UpdatedComponent = (OriginalComponent) => {
 
 export default UpdatedComponent;
 ```
+
+### [Render Peops]()

src/App.js

@@ -26,12 +26,25 @@ import Hero from "./components/Hero";
 import ErrorBoundary from "./components/ErrorBoundary";
 import ClickCounter from "./components/ClickCounter";
 import HoverCounter from "./components/HoverCounter";
+import Increment from "./components/Increment";
+import ClickCounterTwo from "./components/ClickCounterTwo";
+import HoverCounterTwo from "./components/HoverCounterTwo";
 
 function App() {
   return (
     <div className="App">
-      <ClickCounter name="Saish" />
-      <HoverCounter name="Pratik" />
+      <Increment
+        render={(count, incrementCount) => (
+          <ClickCounterTwo count={count} incrementCount={incrementCount} />
+        )}
+      />
+      <Increment
+        render={(count, incrementCount) => (
+          <HoverCounterTwo count={count} incrementCount={incrementCount} />
+        )}
+      />
+      {/* <ClickCounter name="Saish" /> */}
+      {/* <HoverCounter name="Pratik" /> */}
       {/* <ErrorBoundary>
         <Hero heroName="Superman" />
       </ErrorBoundary>

src/components/ClickCounterTwo.js

@@ -0,0 +1,14 @@
+import React, { Component } from "react";
+
+class ClickCounterTwo extends Component {
+  render() {
+    const { count, incrementCount } = this.props;
+    return (
+      <div>
+        <button onClick={incrementCount}>Clicked {count} times</button>
+      </div>
+    );
+  }
+}
+
+export default ClickCounterTwo;

src/components/HoverCounterTwo.js

@@ -0,0 +1,14 @@
+import React, { Component } from "react";
+
+class HoverCounterTwo extends Component {
+  render() {
+    const { count, incrementCount } = this.props;
+    return (
+      <div>
+        <h1 onMouseOver={incrementCount}>Hover {count} times</h1>
+      </div>
+    );
+  }
+}
+
+export default HoverCounterTwo;

src/components/Increment.js

@@ -0,0 +1,30 @@
+import React, { Component } from "react";
+
+class Increment extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      count: 0,
+    };
+  }
+
+  incrementCount = () => {
+    this.setState((prevState) => {
+      return { count: prevState.count + 1 };
+    });
+  };
+
+  render() {
+    return (
+      <div>{this.props.render(this.state.count, this.incrementCount)}</div>
+    );
+  }
+}
+
+export default Increment;
+
+/*
+Sharing common functionality between components.
+The term "render prop" refers to a technique for sharing code between React components using a prop whosevalue is a function. 
+*/